/*
 Theme Name:   Astra Child
 Theme URI:    https://nasirkhan.info/
 Description:  Child theme for Astra. Contains the custom gallery post layout, ACF Photo Gallery fields, WebP upload support, and Google Analytics tracking so they survive parent theme updates.
 Author:       Nasir Khan
 Author URI:   https://nasirkhan.info/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* ==========================================================================
   Gallery post layout (.imgal-container)
   Used by single.php when a post is outside the "post" category.
   ========================================================================== */

.imgal-container {
	line-height: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	border: 2px solid white;
}

.imgal-img {
	width: 100%;
	height: auto;
	transition: filter 0.2s;
}

.imgal-img:hover {
	-webkit-filter: opacity(80%);
	filter: opacity(80%);
	cursor: pointer;
}

.imgal-modal {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #000;
	color: #fff;
	vertical-align: middle;
	height: 100vh;
	width: 100vw;
}

#imgal-modal-close {
	display: inline;
	font-size: 2rem;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	cursor: pointer;
}

.imgal-modal-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media only screen and (max-width: 768px) {
	.imgal-container {
		column-count: 2;
		column-gap: 0;
	}
}

@media only screen and (min-width: 768px) {
	.imgal-container {
		column-count: 3;
		column-gap: 0;
	}
}

@media only screen and (min-width: 992px) {
	.imgal-container {
		column-count: 4;
		column-gap: 0;
	}
}

@media only screen and (min-width: 1200px) {
	.imgal-container {
		column-count: 3;
		column-gap: 0;
		border: 2px solid white;
	}
}