// Create a container that scales to a certain ratio
//
// Example:
// <div class="Ratio Ratio--16-9">
// 	<img> or <iframe>
// </div>

.Ratio {
	position: relative;
	height: 0;

	// Stretch any child element to the ratio container
	> * {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	// Fade in images
	// .Ratio img {
	// 	transition: 400ms opacity;
	// 	&.lazyload:not(iframe) {
	// 		opacity: 0;
	// 	}
	// }
}

.Ratio--16-9 {
	padding-top: 100% / (16/9);
	// padding-top: calc(100% / (16/9));
}
.Ratio--3-2 {
	padding-top: 100% / (3/2);
	// padding-top: calc(100% / (3/2));
}
.Ratio--4-3 {
	padding-top: 100% / (4/3);
	// padding-top: calc(100% / (4/3));
}