@charset "UTF-8";
/* CSS Document */
/*
Small phones: 320px
Standard phones: 360–375px most common
Large phones: 390–430px
Tablets: 768px+
Desktop: 1024px+
///////////////
mobile-first approach
@media (min-width: 768px) {  }
@media (min-width: 1024px) {  }
*/
.gallery {
    display: grid;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 6px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 430px) {
	.gallery {
		grid-template-columns: repeat(2, 1fr);
	}
	img.wide-image {
		grid-column: span 2 / auto;
	}
}
@media (min-width: 768px) {
	.gallery {
		grid-template-columns: repeat(3, 1fr);
	}
	img.four-grid-cells {
		grid-row: span 2 / auto;
		grid-column: span 2 / auto;
	}
}
@media (min-width: 1024px) {
	.gallery {
		grid-template-columns: repeat(4, 1fr);
	}	
}
/* MODAL LIGHTBOX STYLES */
.modal {
	display:none;
	flex-direction: column;	
	position:fixed; 
	inset:0; 
	background:rgba(0,0,0,0.8); 
	align-items:center; 
	justify-content:center;
	z-index: 120;
}
#picCaption, .clickthrough {
	width:100%;
	padding-top: 2vh;
	color: #ffffff;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.clickthrough {
	padding-top: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
}
#previous, #next {
	padding: 0 20px 0 20px;
	z-index: 130;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
}
.modal-content {
	width: 80vw;
	height: 80vh;
}
.modal-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.close {
	position: absolute;
	bottom: 30px;
	right: 30px;
	color: #ffffff;
	font-weight: bold;
	user-select: none;
}
.imgclk:hover, #previous:hover, #next:hover, .close:hover, #modalImg:hover { 
	cursor: pointer;
}