:root {
    counter-reset: masonry;
  }
  .masonry {
  	display: grid;
    grid-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));

    grid-auto-rows: 0;
  }

  .masonry-item {
    border-radius: 5px;
  }

  .masonry-item {
  	position: relative;
     background-color: #eee;
     border-radius: 5px;
     overflow: hidden;
     max-width: 254px;
     max-height: 375px;

  }

  .masonry-item img {
     position: relative;
     max-height: 450px;
  }

  .masonry-item:after {
    font-weight: bold;
    background-color: rgba(0, 0, 0, .2);
    
/*
    content: counter(masonry);
    counter-increment: masonry;
*/
	content: "";
    position: absolute;
    top: 0;
    left: 0; 
    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center; 
    align-items: center;
    transition: all .1s ease-in;
  }

  .masonry-item:hover:after {
    font-size: 30px;
    background-color: rgba(0, 0, 0, .5);
  }

.masonry-content {
	/* max-width: 100%; */

	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
}



#upload_link{
	/* grid-column-start: 6; */
	grid-row-end: span 6;
	cursor: pointer;

}


/*
#################################
	for non images in the grid
#################################
*/

.masonry-item-n {
    border-radius: 5px;
  }

  .masonry-item-n {
     background-color: #eee;
     border-radius: 5px;
     overflow: hidden;
     max-width: 254px; 
     /* max-width: 390px; */
  }

  .masonry-item-n {
     position: relative;
     max-height: 500px;
     text-align: center;
  }

  .masonry-item-n:after {
    font-weight: bold;
    background-color: rgba(0, 0, 0, .2);
    
/*
    content: counter(masonry);
    counter-increment: masonry;
*/
	content: "";
    position: absolute;
    top: 0;
    left: 0; 
    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    justify-content: center; 
    align-items: center;
    transition: all .1s ease-in;
  }

  .masonry-item-n:hover:after {
    font-size: 30px;
    background-color: rgba(0, 0, 0, .5);
  }

.masonry-content-n {
	max-width: 100%;
	padding: .5rem .5rem;

	/*
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	*/
}












#photogrid-wored-vertical {
	/* display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	*/
	columns: 5 300px;
    column-gap: 1rem;

    div {
    	width: 150px;
	    background: #EC985A;
	    color: white;
	    margin: 1rem 1rem 1rem 1rem;
	    display: inline-block;
	    width: 100%;
	    text-align: center;
	    
	    /*font-family: system-ui;
	    font-weight: 900;
	    font-size: 2rem;
	    */
    } 
    @for $i from 1 through 36 { 
    	div:nth-child(#{$i}) {
    		$h: (random(400) + 100) + px;
      		height: $h;
      		line-height: $h;
    	}
  	}
}