/*------------------------------------*\
    
    CTA Banner Block - Block-Specific Styling

    This file contains styles for the CTA Banner block.

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

.cta-banner {
    position: relative;
    padding: var(--section-margins) 0;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.cta-banner__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cta-banner__img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.cta-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.cta-banner__content .sub-heading {
    color: var(--white);
}

.cta-banner__content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.cta-banner__content h2,
.cta-banner__content h3 {
    color: #fff;
}

@media (min-width: 1200px) {
    .cta-banner__heading {
        font-size: 64px;
    }
}