.cta-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-l);
    min-block-size: clamp(20rem, 34vw, 30rem);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--primary-ultra-light);
}

.cta-banner__media,
.cta-banner__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.cta-banner__media img {
    object-fit: cover;
}

.cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        var(--primary-ultra-dark-trans-80) 0%,
        var(--primary-dark-trans-60) 45%,
        var(--primary-trans-40) 100%
    );
}

.cta-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-l);
    padding: clamp(var(--space-l), 4vw, var(--section-space-s));
}

.cta-banner__content {
    max-inline-size: 62ch;
}

.cta-banner__eyebrow {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-light);
}

.cta-banner__heading {
    margin: 0;
    color: var(--primary-ultra-light);
    font-size: clamp(var(--text-xl), 3.5vw, var(--h2));
    line-height: 1.1;
}

.cta-banner__copy {
    margin: var(--space-s) 0 0;
    color: var(--primary-light);
    font-size: var(--text-m);
    line-height: var(--base-text-lh);
}

.cta-banner__button {
    align-self: center;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cta-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .cta-banner__button {
        align-self: flex-start;
    }
}