/* Gallery CSS - v1 */

.gal-item
{
	width:100%;
}


.gal-item:hover
{
	cursor:pointer;
}

/* - */

#gallery-container
{
	display: grid;
    grid-template-columns: auto;
    grid-gap: 16px;
	padding: 96px 0px;
}

@media ( min-width: 768px )
{
	#gallery-container
	{
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 992px )
{
	#gallery-container
	{
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1200px )
{
	#gallery-container
	{
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* - - */

#preview-container
{
	display:none;
	position: fixed;						
	width:100%;
	height:100%;						
	top:0;
	left:0;						
	z-index:100;						
	background-color: rgba(0,0,0,0.8);
}

#preview-container:hover
{
	cursor:pointer;
}

#preview-img
{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 80%;
	max-height: 80%;
	transform: translate(-50%,-50%);
	border: solid 8px #fff;
}