/* ATLCOC Banner Full-Bleed Fix
   Load this LAST, after styles.css, mobile.css, layout-fixes.css,
   and mobile-full-width.css.
*/

/*
 * The previous fixes could still leave the banner inside a constrained
 * parent (for example main or .container). This rule deliberately
 * breaks the banner out of that parent and makes it viewport-wide.
 */
@media screen and (max-width: 900px){

    .atl-home-banner,
    .hero.atl-home-banner,
    main > .atl-home-banner{
        position:relative !important;
        left:50% !important;
        right:auto !important;
        width:100vw !important;
        max-width:100vw !important;
        margin-left:-50vw !important;
        margin-right:0 !important;
        padding:0 !important;
        border:0 !important;
        overflow:hidden !important;
        line-height:0 !important;
        box-sizing:border-box !important;
    }

    .atl-home-banner img,
    .hero.atl-home-banner img,
    main > .atl-home-banner img{
        display:block !important;
        width:100vw !important;
        max-width:100vw !important;
        min-width:100vw !important;
        height:auto !important;
        max-height:none !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        object-fit:cover !important;
        object-position:center center !important;
        box-sizing:border-box !important;
    }

    /*
     * Modern mobile browsers expose dynamic viewport units that account
     * for browser chrome more accurately.
     */
    @supports (width: 100dvw){
        .atl-home-banner,
        .hero.atl-home-banner,
        main > .atl-home-banner{
            width:100dvw !important;
            max-width:100dvw !important;
            margin-left:-50dvw !important;
        }

        .atl-home-banner img,
        .hero.atl-home-banner img,
        main > .atl-home-banner img{
            width:100dvw !important;
            max-width:100dvw !important;
            min-width:100dvw !important;
        }
    }
}

/* Prevent the full-bleed technique from creating horizontal scrolling */
html,
body{
    overflow-x:hidden !important;
}