/*
---------------------------------------------------
Mobile banner
---------------------------------------------------
*/

.component.usn_cmp_banner .banner-mobile-image {
    display: none;
}

@media (max-width: 767px) {
    body .component.usn_cmp_banner .item.banner-mobile-stacked,
    body .component.usn_cmp_banner .banner-mobile-stacked > .inner,
    body .component.usn_cmp_banner .banner-mobile-stacked .container,
    body .component.usn_cmp_banner .banner-mobile-stacked .row,
    body .component.usn_cmp_banner .banner-mobile-stacked > .image,
    body .component.usn_cmp_banner .banner-mobile-stacked > .image .video {
        height: auto !important;
        min-height: 0 !important;
    }

    .component.usn_cmp_banner .item.banner-mobile-stacked > .image,
    .component.usn_cmp_banner .item.banner-mobile-stacked > .inner {
        position: relative !important;
        inset: auto;
        transform: none !important;
    }

    .component.usn_cmp_banner .banner-mobile-stacked > .image:has(.video) {
        background-image: none !important;
        opacity: 1 !important;
    }

    .component.usn_cmp_banner .banner-mobile-stacked > .image:has(.video) > picture,
    .component.usn_cmp_banner .banner-mobile-stacked > .image:has(.video) > img,
    .component.usn_cmp_banner .banner-mobile-stacked:has(> .banner-mobile-image) > .image {
        display: none;
    }

    .component.usn_cmp_banner .banner-mobile-stacked > .image .video {
        position: relative !important;
        inset: auto;
        width: 100% !important;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .component.usn_cmp_banner .banner-mobile-stacked .video .video-player {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        transform: none !important;
        opacity: 1 !important;
    }

    .component.usn_cmp_banner .banner-mobile-stacked .video:has(video) {
        aspect-ratio: auto;
    }

    .component.usn_cmp_banner .banner-mobile-stacked .video:has(video)::before {
        display: none;
    }

    .component.usn_cmp_banner .banner-mobile-stacked .video video.video-player {
        position: relative !important;
        display: block;
        height: auto !important;
        object-fit: contain;
    }

    .component.usn_cmp_banner .banner-mobile-stacked > .banner-mobile-image,
    .component.usn_cmp_banner .banner-mobile-image img {
        display: block;
        width: 100%;
        height: auto;
    }

    .component.usn_cmp_banner .banner-mobile-stacked .info.col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 24px var(--base-half-spacing);
        overflow-wrap: anywhere;
    }

    .component.usn_cmp_banner .banner-mobile-stacked .scroll-prompt {
        display: none;
    }
}