
.acf-block.ql-image-text-column-alt {
    position: relative;
}

.ql-image-text-column-alt .column-text.bg-white {
    background: #FFF;
}

.ql-image-text-column-alt .column-text.bg-black {
    background: #2C3341;
}

.ql-image-text-column-alt h1,
.ql-image-text-column-alt h2,
.ql-image-text-column-alt h3,
.ql-image-text-column-alt h4,
.ql-image-text-column-alt h5,
.ql-image-text-column-alt h6,
.ql-image-text-column-alt p,
.ql-image-text-column-alt li {
    color: #2C3341;
}

.ql-image-text-column-alt .bg-dark h1,
.ql-image-text-column-alt .bg-dark h2,
.ql-image-text-column-alt .bg-dark h3,
.ql-image-text-column-alt .bg-dark h4,
.ql-image-text-column-alt .bg-dark h5,
.ql-image-text-column-alt .bg-dark h6,
.ql-image-text-column-alt .bg-dark p,
.ql-image-text-column-alt .bg-dark figcaption,
.ql-image-text-column-alt .bg-dark li {
    color: #FFF;
}

/* Block specific CSS */
.ql-image-text-column-alt .columns .column-text {
    position: relative;
    z-index: 1;
    margin-top: -120px;
    margin-left: 40px;
    margin-right: 40px;
    padding: 40px;
}

.ql-image-text-column-alt .columns .column-image {
    box-shadow: 20px 0px 60px 0px rgba(0, 0, 0, 0.15);
    height: 400px;
}

.ql-image-text-column-alt .columns .column-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


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

    .ql-image-text-column-alt {
        margin-top: calc(80px + 80px);
        margin-bottom: calc(40px + 80px);
    }

    .ql-image-text-column-alt .columns .column-text {
        max-width: 900px;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;

        padding: 80px 80px 80px 120px;
    }

    .ql-image-text-column-alt .columns .column-image {
        position: absolute;
        top: -80px;
        bottom: -80px;
        left: 20%;
        right: 0;
        height: auto;
    }

    /* Reverse column */
    .ql-image-text-column-alt.column-reverse .columns .column-text {
        margin-left: auto;
        padding: 80px 120px 80px 80px;
    }

    .ql-image-text-column-alt.column-reverse .columns .column-image {
        left: 0;
        right: 20%;
    }
}

@media only screen and (max-width: 480px) {
        
    .ql-image-text-column-alt .columns .column-text {
        margin-left: 24px;
        margin-right: 24px;
        padding: 40px 24px;
    }

}