/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/css/frontend/components/acf-flexible-content/banner_halves.css ***!
  \************************************************************************************************************************************************************************************************************************/
.banner-halves {
    --aspect-ratio: 1;

    border-bottom: 2px solid var(--rb--color--accent);
    position: relative;
}

    @media (min-width:992px) {

    .banner-halves:not(.square) {
            --aspect-ratio: unset;
            height: calc( 100dvh - var(--rb--header--height) )
    }
        }

    @media (max-width:767px) {.banner-halves {
        height: 50dvh
}
    }

    .banner-halves .heading {
        grid-row: 1;
        grid-column: 1;
        position: relative;
        z-index: 10;
        place-self: center;
        max-width: 730px;
        width: 80%;
        text-align: center;
    }

    .banner-halves .items {
        --cols: 1fr 1fr;

        grid-row: 1;
        grid-column: 1;
    }

    .banner-halves .item {
        padding: var(--rb--space--16);
        position: relative;
    }

    @media (min-width:768px) {

    .banner-halves .item {
            aspect-ratio: var(--aspect-ratio);
            padding: clamp(35px, 2.6vw, 50px)
    }
        }

    .banner-halves .item picture {
            position: absolute;
            z-index: 5;
        }

    .banner-halves .item picture:before {
                background-color: var(--rb--color--almost-black);
                content: '';
                opacity: .35;
                position: absolute;
                top: 0; right: 0; bottom: 0; left: 0;
            }

    .banner-halves .item picture img {
                height: 100%;
            }

    .banner-halves .item .btn {
            position: relative;
            z-index: 10;
            -ms-flex-item-align: end;
                align-self: end;
            justify-self: center;
        }

    @media (max-width:767px) {

    .banner-halves .item .btn {
                display: none
        }
            }

    .banner-halves .btn-wrapper {
        position: absolute;
        bottom: 0;
        padding: var(--rb--space--16);
        left: 0;
        right: 0;
        z-index: 10;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    @media (min-width:768px) {

    .banner-halves .btn-wrapper {
            display: none
    }
        }

@media (min-width:992px) {

body.admin-bar .banner-halves:not(.square) {
            height: calc( 100dvh - (var(--rb--header--height) + 32px) )
    }
        }