/* ================================================

	# Aspect Media: Proportional Thumbnails

	Apply intrinsic aspect ratio of img/video to its container
	Use padding-bottom % trick to share an aspect ratio between img/video and its container.

	Can use source's intrinsic ratio dynamically (via PHP) or force for all the same with presets like .force-aspect-16-9

	## TIP: Disabling Conditionally

	To responsively DISABLE this proportionality on mobile or desktop, set height .aspect__wrap component class

	So if you have this...

	`<div class="thing aspect__wrap">`

	...you could do this:

	`@media (max-width: 600px) { .thing { height: 100%; } }`

	...then the img within it would stretch to fill the space.

================================================ */

.aspect__wrap,
.aspect__spacer,
.aspect {
	display: block;
}

.aspect__wrap {
	position: relative;
	overflow: hidden;
	perspective: 1000px;
}

.aspect {
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

video.aspect,
img.aspect {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

/* CSS background-image version */
.aspect--bg {
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}


video.aspect:not(.aspect--bg),
img.aspect:not(.aspect--bg) {
	object-fit: cover;
}

video.aspect.contain:not(.aspect--bg),
img.aspect.contain:not(.aspect--bg) {
	object-fit: contain;
}


/* --------------------------------

	=Embeds

-------------------------------- */

.aspect__wrap iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}


/* --------------------------------

	=Preset Classes
	=Force this aspect ratio

-------------------------------- */

:root {
	--aspect-default: 125%;
}

.force-aspect-default .aspect__spacer {
	padding-bottom: var(--aspect-default, 56.25%) !important;
}

.force-aspect-1-1 .aspect__spacer {
	padding-bottom: 100% !important;
}

.force-aspect-16-9 .aspect__spacer {
	padding-bottom: 56.25% !important;
}

.force-aspect-8-5 .aspect__spacer {
	padding-bottom: 62.5% !important;
}

.force-aspect-3-2 .aspect__spacer {
	padding-bottom: 66.66% !important;
}

.force-aspect-4-5 .aspect__spacer {
	padding-bottom: 125% !important;
}