/* --------------------------------
š” Aspect Ratio fallback in CSS
š https://codyhouse.co/nuggets/aspect-ratio-in-css
-------------------------------- */
.custom-aspect-ratio {
--aspect-ratio: 16/9;
position: relative;
height: 0;
padding-bottom: calc(100%/(var(--aspect-ratio)));
}
.custom-aspect-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* demo stuff */
section {
width: calc(100% - 3rem);
margin-left: auto;
margin-right: auto;
max-width: 32rem;
padding: 3rem 0;
}