.content-callout {
    padding: 0 2rem;

    & .content-callout__card {
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        min-height: 320px;
        border-radius: 25px;
        overflow: hidden;
    }

    /* ── Copy column (left on desktop) ── */

    & .content-callout__copy-col {
        background-color: var(--color-navy);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        padding: 4rem 3rem;

        @media (max-width: 899px) {
            padding: 2rem 1.5rem;
        }
    }

    /* ── Content block ── */

    & .content-callout__content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    & .content-callout__subhead {
        font-size: 18px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--color-gold);
        margin: 0;
    }

    & .content-callout__headline {
        font-family: 'Domine', serif;
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 700;
        color: var(--color-white);
        margin: 0;
        line-height: 1.15;
    }

    & .content-callout__copy {
        font-size: 1rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.85);

        & p:first-child { margin-top: 0; }
        & p:last-child  { margin-bottom: 0; }

        & a {
            color: var(--color-gold);
            text-decoration: underline;

            &:hover { color: var(--color-white); }
        }
    }

    /* ── Action buttons ── */

    & .content-callout__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* ── Image (right on desktop) ── */

    & .content-callout__image-wrap {
        flex-shrink: 0;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background-color: #fff;
    }

    /* Link wrapper is a transparent pass-through so the image rules below still apply */
    & .content-callout__image-link {
        display: contents;
    }

    & .content-callout__image {
        max-width: 60%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* ── Desktop: copy left, image right flush to edge ── */

    @media (min-width: 900px) {
        & .content-callout__card {
            flex-direction: row;
            align-items: stretch;
            min-height: 360px;
        }

        & .content-callout__copy-col {
            flex: 1;
            padding: 2rem;
        }

        & .content-callout__image-wrap {
            flex: 0 0 45%;
            min-height: unset;
        }
    }
}