/* ------------------------------ */
/* ----------- Banner ----------- */
/* ------------------------------ */

.section > .section__banner {
    max-width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.banner {
    position: relative;
    height: var(--app-height);
}

.banner__media {
    position: relative;
    width: 100%;
    height: 100%;
}

body:not(.color-dark) .banner__media {
    background-color: var(--brand-grey);
}

body.color-dark .banner__media {
    background-color: var(--brand-grey-reversed);
}


.banner__media__container {
    position: relative;
    z-index: 2;
}

.banner__media__blocker {
    position: absolute;
    z-index: 5;
    top: 0;
    height: 100%;
    width: 25%;
    background-color: var(--brand-white);
}

body.color-dark .banner__media__blocker {
    background-color: var(--brand-black);
}

.banner__media__blocker--left {
    left: 0;
}

.banner__media__blocker--right {
    right: 0;
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1240px) {

    .banner {
        min-height: 768px;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

    .banner {
        max-height: 768px;
        min-height: 500px;
    }

}


@media all and (max-width: 767.98px) {

    .banner {
        max-height: 500px;
        min-height: 320px;
    }

}


@media all and (max-width: 575.98px) {

    .banner {
        height: 317px;
    }

}