/* RED20-V21-BANNER-IMAGE-FIT-20260902
   UI-only homepage banner refinement.
   Keeps the existing V5/V14 banner footprint and changes only how the image fills it.
*/

/* Make the slide itself own the banner frame. */
html body .banner-swiper,
html body .banner-swiper .swiper-wrapper,
html body .banner-swiper .swiper-slide,
html body .banner-swiper .center-swiper-slide,
html body .banner-swiper .swiper-slide > a {
    width: 100% !important;
}

html body .banner-swiper .swiper-slide,
html body .banner-swiper .center-swiper-slide {
    height: min(220px, 17.857vw) !important; /* same visual footprint as the existing 5.6:1 banner */
    max-height: 220px !important;
    min-height: 118px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

html body .banner-swiper .swiper-slide > a {
    display: block !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
}

html body .banner-swiper img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
}

@media (max-width: 767.98px) {
    html body .banner-swiper .swiper-slide,
    html body .banner-swiper .center-swiper-slide {
        height: min(132px, 34.483vw) !important; /* same mobile footprint as the existing 2.9:1 banner */
        max-height: 132px !important;
        min-height: 92px !important;
        border-radius: 12px !important;
    }

    html body .banner-swiper img {
        object-position: center center !important;
    }
}