/* =========================================================
   RESPONSIVE MEDIA
   ========================================================= */

.media-frame {
    width: 100%;
    display: block;
    overflow: hidden;
}

.media-frame--landscape {
    aspect-ratio: 16 / 9;
}

.media-frame--standard {
    aspect-ratio: 4 / 3;
}

.media-frame--square {
    aspect-ratio: 1 / 1;
}

.media-frame--portrait {
    aspect-ratio: 4 / 5;
}

.media-frame__image {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.media-frame--landscape .media-frame__image,
.media-frame--standard .media-frame__image,
.media-frame--square .media-frame__image,
.media-frame--portrait .media-frame__image {
    height: 100%;
    object-fit: cover;
}