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

    Contained Image + Text Block Customizations - Global Styling

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

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

.bg-gray {
    background: #EFEFEF;
}

.image-text {
    padding: 65px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

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

.image-text .flex-row {
    align-items: center
}

.image-text__text {
    padding-bottom: 50px;
}

.img-text__bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: left;
    z-index: -1;
    object-position: right;
}

.img-text__bg-bottom {
    position: absolute;
    bottom: -56px;
    right: 0;
    z-index: -1;
}

.img-text__bg-top {
    position: absolute;
    top: -0;
    left: -30px;
    z-index: -1;
}

.image-text__img img {
    width: 100%;
    max-width: inherit;
}

.image-text--top-img .image-text__img  img {
    max-width: 100%;
    margin: 0 auto;
    width: auto;
}

.image-text--top-img .img-text__bg {
    object-position: left;
}

.image-text--inner .image-text__text h2 {
    padding-bottom: 20px;
    letter-spacing: 0;
}

.bg-gray.image-text--flexible .image-text__img img {
    height: 214px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .image-text {
        padding-bottom: 50px;
    }

    .image-text--top-img {
        padding: 115px 0 62px 0;
    }

    .image-text--flexible.image-text .flex-row {
        align-items: flex-start;
    }

    .image-text--flexible .flex-opposite {
        flex-direction: row-reverse;
    }

    .image-text--flexible .image-text__img {
        width: 46%;
    }

    .image-text--flexible .image-text__text {
        width: 54%;
        padding-bottom: 0;
    }

    .bg-gray.image-text--flexible .image-text__img img {
        height: 220px;
    }

}

@media (min-width: 1200px) {

    .bg-gray.image-text--flexible .image-text__img img {
        height: auto;
    }

    .image-text--inner.image-text .flex-row {
        align-items: center;
    }

    .image-text--flexible .image-text__img {
        width:41.66666667%;
    }

    .image-text--flexible .image-text__text {
        width: 58.33333333%;
    }

    .image-text {
        padding: 125px 0px 164px 0;
    }

    .image-text--inner {
        padding: 80px 0;
    }

    .image-text--top-img {
        padding: 70px 0;
    }

    .flex-opposite {
        flex-direction: row-reverse;
    }

    .img-text__bg-bottom {
        bottom: -0;
        right: 52px;
    }

    .img-text__bg-top {
        top: -0;
        left: 52px;
    }

    .image-text__text {
        padding-bottom: 0;
    }

    .image-text--right .image-text__text {
        padding-right: 80px;
    }

    .image-text--left .image-text__text {
        padding-left: 80px;
    }

    .image-text h2 {
        padding-bottom: 25px;
    }
}