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

    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)

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

.image-and-text {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: inherit;
}


.half-and-half {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}

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

.half-and-half-image img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    display: block;
    object-fit: cover;
    -o-object-fit: cover;
    font-family: 'object-fit: cover;';
}


.half-and-half-text {
    padding-top: 30px;
    position: relative;
}

    .half-and-half.white-bg {
        background: #fff;
    }

    @media only screen and (min-width: 1025px) {

        .half-and-half.right {
            flex-direction: row-reverse;
        }

        .half-and-half-image,
        .half-and-half-text {
            flex: 0 0 50%;
        }

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

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

            .half-and-half-text article {
                position: relative;
                z-index: 2;
            }

    }