.cta-banner {
    position: relative;
    z-index: 1;
}

.cta-banner:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(31, 47, 77, 0.75) 0%, rgba(31, 47, 77, 0.95) 25%, rgba(31, 47, 77, 0.95) 75%, rgba(31, 47, 77, 0.75) 100%);
}

.cta-banner--light-blue:after {
    background: linear-gradient(90deg, rgba(63, 85, 129, 0.75) 0%, rgba(63, 85, 129, 0.95) 25%, rgba(63, 85, 129, 0.95) 75%, rgba(63, 85, 129, 0.75) 100%);
}

.cta-banner__wrapper {
    position: relative;
    z-index: 2;
    color: var(--white);
}

.cta-banner__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-banner h2,
.cta-banner .sub-heading,
.cta-banner .sub-heading:before {
    color: var(--white);
}

.cta-banner .btn-primary {
    background: var(--white);
    color: var(--heading-color);
    box-shadow: 3px 3px 0 0 var(--light-blue);
}

@media(min-width: 768px) {
    .cta-banner:after {
        background: linear-gradient(90deg, rgba(31, 47, 77, 0.35) 0%, rgba(31, 47, 77, 0.95) 15%, rgba(31, 47, 77, 0.95) 85%, rgba(31, 47, 77, 0.35) 100%);
    }

    .cta-banner--light-blue:after {
        background: linear-gradient(90deg, rgba(63, 85, 129, 0.35) 0%, rgba(63, 85, 129, 0.95) 15%, rgba(63, 85, 129, 0.95) 85%, rgba(63, 85, 129, 0.35) 100%);
    }
}

@media(min-width: 1200px) {
    .cta-banner .btn-primary:hover {
        background: var(--off-white-darker);
        color: var(--heading-color);
        box-shadow: none;
    }

    .cta-banner__wrapper p {
        letter-spacing: 0.02em;
    }

    .cta-banner:after {
        background: linear-gradient(90deg, rgba(31, 47, 77, 0.35) 0%, rgba(31, 47, 77, 0.95) 25%, rgba(31, 47, 77, 0.95) 75%, rgba(31, 47, 77, 0.35) 100%);
    }

    .cta-banner--light-blue:after {
        background: linear-gradient(90deg, rgba(63, 85, 129, 0.35) 0%, rgba(63, 85, 129, 0.95) 25%, rgba(63, 85, 129, 0.95) 75%, rgba(63, 85, 129, 0.35) 100%);
    }
}