/*
 * Stable media layout contract
 *
 * The media file owns only its intrinsic width/height. The frame owns the
 * rendered geometry before the file is downloaded. Use responsive custom
 * properties or one of the presets below; never copy slot dimensions into the
 * img width/height attributes.
 */
.media-frame {
    --media-frame-fit: cover;
    --media-frame-position: center;
    position: relative;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--media-frame-height-desktop, auto);
    min-block-size: 0;
    aspect-ratio: var(--media-frame-ratio-desktop, auto);
    overflow: hidden;
}

.media-frame--fill {
    --media-frame-height-desktop: 100%;
    --media-frame-height-tablet: 100%;
    --media-frame-height-mobile: 100%;
}

.media-frame--banner-wide {
    --media-frame-height-desktop: 400px;
    --media-frame-height-tablet: 300px;
    --media-frame-height-mobile: 200px;
}

.media-frame--banner-contained {
    --media-frame-height-desktop: 300px;
    --media-frame-height-tablet: 240px;
    --media-frame-height-mobile: 200px;
}

.media-frame--video {
    --media-frame-ratio-desktop: 16 / 9;
    --media-frame-ratio-tablet: 16 / 9;
    --media-frame-ratio-mobile: 16 / 9;
}

.media-frame--square {
    --media-frame-ratio-desktop: 1 / 1;
    --media-frame-ratio-tablet: 1 / 1;
    --media-frame-ratio-mobile: 1 / 1;
}

.media-frame--portrait {
    --media-frame-ratio-desktop: 3 / 4;
    --media-frame-ratio-tablet: 3 / 4;
    --media-frame-ratio-mobile: 3 / 4;
}

.media-frame > a,
.media-frame > picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.media-frame > :is(img, video),
.media-frame > a > :is(img, video, picture),
.media-frame > picture > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    object-fit: var(--media-frame-fit);
    object-position: var(--media-frame-position);
}

.media-frame--fill > .swiper-wrapper,
.media-frame--fill > .swiper-wrapper > .swiper-slide {
    block-size: 100%;
}

.media-frame--fill :is(.banner-img, .background-video, .single-video) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--media-frame-fit);
    object-position: var(--media-frame-position);
}

video.media-video-layout {
    aspect-ratio: var(--media-video-ratio, 16 / 9);
}

/* Visual size belongs in CSS; the img attributes remain intrinsic metadata. */
.option-icon-media {
    inline-size: 80px;
    block-size: 80px;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .media-frame {
        block-size: var(--media-frame-height-tablet, var(--media-frame-height-desktop, auto));
        aspect-ratio: var(--media-frame-ratio-tablet, var(--media-frame-ratio-desktop, auto));
    }
}

@media (max-width: 767.98px) {
    .media-frame {
        block-size: var(--media-frame-height-mobile, var(--media-frame-height-tablet, var(--media-frame-height-desktop, auto)));
        aspect-ratio: var(--media-frame-ratio-mobile, var(--media-frame-ratio-tablet, var(--media-frame-ratio-desktop, auto)));
    }
}