Aspect-Ratio Media Wrapper

/* Aspect-ratio media wrappers — consistent proportions for images, video, iframes. */

/* Base wrapper */
.ratio {
    position: relative;
    width: 100%;
}

.ratio > * {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Change to 'contain' to letterbox instead of cropping */
    display: block;
}

/* Pre-defined ratios */
.ratio-1x1  { aspect-ratio: 1 / 1;  }
.ratio-4x3  { aspect-ratio: 4 / 3;  }
.ratio-3x2  { aspect-ratio: 3 / 2;  }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.ratio-9x16 { aspect-ratio: 9 / 16; }
.ratio-2x3  { aspect-ratio: 2 / 3;  }

/* Iframe / embed variant */
.ratio-embed {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.ratio-embed iframe,
.ratio-embed video,
.ratio-embed embed,
.ratio-embed object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Make .ratio-embed a containing block */
.ratio-embed {
    position: relative;
}