.academy-site-banner {
    margin-block: 4.6rem;

    .card {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 2rem;
        border-radius: 2rem;
        padding: 3.2rem;
        box-shadow: 0px 0px 50px rgba(255, 158, 128, 0.25);
        border: 1px rgba(255, 0, 49.46, 0.25) solid;
    }

    .background {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        object-position: top left;
    }

    .content { position: relative; flex: 1 1 auto; min-width: 0; }
    .heading { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.4rem; }
    .laurel { flex: none; width: 3.6rem; height: auto; }
    .divider { flex: none; align-self: stretch; width: 1px; background: var(--header-2); opacity: .25; }
    .title,
    .copy { padding: 0; margin: 0; }
    .title {
        font-weight: 300;
        color: var(--header-2);

        > * { margin: 0; font: inherit; letter-spacing: inherit; color: inherit;text-align: left; }
        :is(strong, b) { font-weight: 500; }
    }
    .copy {
        color: var(--paragraph);

        > * { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
    }

    .cta {
        margin-top: 1.8rem;
        font-style: normal;
        text-decoration: none;
        width: fit-content;

        &::after {
            width: .9rem;
            height: 1.2rem;
            background: url('./assets/arrow.svg') center / contain no-repeat;
            content: '';
        }

        &:hover::after {
            background: url('./assets/arrow_black.svg') center / contain no-repeat;
        }
    }
}

@media only screen and (max-width: 960px) {
    .academy-site-banner {
        .desktop {
            display: none;
        }

        .card {
            flex-direction: column-reverse;
        }

        .illustration {
            width: 100%;
        }

        .content {
            text-align: center;
        }

        .heading {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .heading .divider {
            display: none;
        }

        .heading .title > * {
            text-align: center;
        }

        .cta {
            margin-inline: auto;
        }
    }
}
@media only screen and (min-width: 961px) {
    .academy-site-banner {
        .mobile {
            display: none;
        }

        .card {
            --_w: 1332;
            --_h: 436;
            position: relative;
            left: 50%;
            width: min(calc(var(--_w) * 0.1rem), calc(100vw - 3rem));
            max-width: calc(var(--_w) * 0.1rem);
            aspect-ratio: var(--_w) / var(--_h);
            transform: translateX(-50%);
            padding: clamp(3.2rem, 4.8vw, 6.9rem);
            gap: clamp(3rem, 3.7vw, 5.3rem);
        }

        .content { max-width: 58.2rem; }
        .heading { gap: 3.8rem; margin-bottom: 5rem; }
        .laurel { width: 10.8rem; }
        .divider { height: 10.3rem; align-self: center; }
        .title { flex: none; width: min(36.1rem, 27vw); }
        .copy { font-weight: 400; }
        .cta { margin-top: 2.7rem; }

        .illustration {
            display: block;
            flex: 0 1 58.2rem;
            width: 43.7%;
            max-width: 58.2rem;
            height: auto;
            object-fit: contain;
        }
    }
}