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

    Half & Half Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Half & Half 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-start-blocks.php)

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

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.half-and-half-image,
.half-and-half-text {
    position: relative;
    width: 100%;
}

.half-and-half-image {
    height: 215px;
}

.half-and-half-image img {
    height: 100%;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    -o-object-fit: cover;
}
.half-and-half-image.image-contain__wrap img{
    object-fit: scale-down;
    -o-object-fit: scale-down;
}
.half-and-half-text {
    padding: 50px 22px 36px;
}

.sub-heading--no-img::before {
    display: none;
}

.half-and-half-text__wrapper .sub-heading::before {
    left: -23px;
    top: -33px;
    transform: none;
}

.half-and-half-text__wrapper .btns-gap {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .half-and-half-image {
        height: 425px;
    }

    .half-and-half-text {
        padding: 75px 52px 35px;
    }

    .half-and-half-text__wrapper .sub-heading::before {
        left: -31px;
        top: -30px;
    }
}

@media (min-width: 1200px) {

    .half-and-half-image,
    .half-and-half-text {
        position: relative;
        width: 50%;
    }

    .half-and-half-image {
        height: auto;
    }

    .half-and-half-image img {
        position: absolute;
    }

    .half-and-half-text {
        padding: 125px 21px;
    }

    .half-and-half-text__wrapper {
        max-width: 557px;
    }

    .image-block-right .half-and-half-text__wrapper {
        margin-left: auto;
    }

    .half-and-half-text__wrapper .btns-gap {
        margin-top: 25px;
    }

    .image-block-right .half-and-half-text {
        padding-right: 75px;
    }

    .image-block-left .half-and-half-text {
        padding-left: 75px;
    }

    .half-and-half-text h2 {
        font-size: 50px;
    }
}