/* 16:9 aspect ratio for gallery thumbnails without affecting other images */
/* Scope strict 16:9 behavior to the Creations grid to avoid side effects */
#creations .anim-img-scale {
	position: relative;
	background-color: #000; /* letterbox background */
	aspect-ratio: 16 / 9; /* precise 16:9 */
	padding: 0; /* avoid extra height */
	border: 0; /* avoid extra height */
	transform: none !important; /* neutralize theme scale transforms */
}

/* Removed padding-top hack in favor of aspect-ratio */

#creations .anim-img-scale > img.anim-img-scale__inner {
	/* Fill the 16:9 box exactly without cropping */
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none !important; /* neutralize theme scale transforms */
}

/* Ensure overlays inside the tile remain correctly layered */
.anim-img-scale > .bg-overlay-black {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Restore comfortable spacing in the creations grid */
#creations .flex-container {
	align-items: stretch;
}

#creations .four-columns {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 20px;
}

/* Add left/right padding to the entire grid wrapper */
#creations .padding--30 {
	padding-left: 70px;
	padding-right: 70px;
}

@media only screen and (max-width: 767px) {
	#creations .padding--30 {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Magnific Popup: make iframe/video ~70% viewport height with correct 16:9 sizing */
.mfp-iframe-holder .mfp-content {
	width: min(calc(70vh * (16 / 9)), 90vw);
	max-width: none;
}

.mfp-iframe-holder .mfp-iframe-scaler {
	height: 70vh;
	padding-top: 0; /* override default 56.25% padding */
}

.mfp-iframe-holder .mfp-iframe-scaler iframe {
	position: static;
	width: 100%;
	height: 100%;
}