/*------------------------------------*\
    
    Full-Width Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Full-Width Image + Text' block. 
    If there is any reasons why you would need to style this separately,
    please create a block-specific stylesheet for it (don't forget to register that block-specific stylesheet in acf-starter-blocks.php)

\*------------------------------------*/

.full-width-image-text {
    position: relative;
    background-color: #121212;
}

.full-width-image-text__img,
.full-width-image-text__img--tablet-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
    opacity: 0.26;
}

.full-width-image-text__content {
    padding: 0;
    position: relative;
    z-index: 2;
}


.full-width-image-text__content {
    max-width: 1184px;
}

.full-width-image-text__content--middle {
    margin: 0 auto;
}

.layout-left.full-width-image-text--direct-overlay .full-width-image-text__img--tablet-mobile {
    height: 280px;
    top: auto;
    bottom: 0;
    filter: grayscale(100%);
}

.layout-left.full-width-image-text--direct-overlay:before {
    content: "";
    width: 100%;
    height: 200px;
    background: linear-gradient(to bottom, #121212, transparent);
    position: absolute;
    left: 0;
    top: auto;
    bottom: 280px;
    z-index: 2;
}

.layout-left.full-width-image-text--direct-overlay {
    padding-bottom: 280px;
}

.full-width-image-text__img {
    display: none;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .layout-left.full-width-image-text--direct-overlay .full-width-image-text__img--tablet-mobile {
        height: 50%;
        top: auto;
        bottom: 0;
    }

    .layout-left.full-width-image-text--direct-overlay:before {
        bottom: calc(50% - 200px);
    }

    .layout-left.full-width-image-text--direct-overlay {
        padding-bottom: calc(50% + (var(--section-margins) + var(--section-margins)) );
    }
}

@media (min-width: 1200px) {
    .layout-left.full-width-image-text--direct-overlay:before {
        display: none;
    }

    .layout-left.full-width-image-text--direct-overlay .full-width-image-text__img--tablet-mobile {
        height: 100%;
    }

    .layout-left.full-width-image-text--direct-overlay {
        padding-bottom: var(--section-margins);
    }

    .full-width-image-text__img--tablet-mobile {
        display: none;
    }

    .full-width-image-text__img {
        display: block;
    }
}