.apo-card-cta-navigation {
    --card-padding-block: 1.5rem;
    --card-padding-inline: 2.1875rem;
    --card-body-width: 80%;
    container: card-cta-navigation / inline-size;
    min-height: 100%;
}

    /* Variation: Square (default) */
    .apo-card-cta-navigation:where(:not(.is-style-portrait):not(.is-style-tall)) {
        --card-body-alignment: center;
    }

        .apo-card-cta-navigation:where(:not(.is-style-portrait):not(.is-style-tall)) :where(.apo-card-cta-navigation__wrapper) {
            --card-image-row-height: clamp(10rem, -10.4942rem + 87.2093cqi, 19.375rem);
        }

    /* Variation: Portrait */
    .apo-card-cta-navigation:is(.is-style-portrait) :where(.apo-card-cta-navigation__wrapper) {
        --card-image-row-height: clamp(9.75rem, -24.8169rem + 147.093cqi, 25.5625rem);
        --card-padding-block: 2.1875rem;
    }

    /* Variation: Tall */
    .apo-card-cta-navigation:is(.is-style-tall) :where(.apo-card-cta-navigation__wrapper) {
        --card-image-row-height: clamp(15.1875rem, -25.1177rem + 171.5116cqi, 33.625rem);
        --card-fs-title: clamp(1.5rem, 0.407rem + 4.6512cqi, 2rem);
        --card-padding-block: 2.5rem;
    }

    /* Hover animation if link is present */
    .apo-card-cta-navigation:has(a:hover) {
        --card-body-width: 100%;
        --card-video-icon-scale: 1.333;
        --card-body-shadow-offset-x: 1.25rem;
        --card-body-shadow-offset-y: 0.25rem;
        --card-body-shadow-radius: 3.375rem;
        --card-body-shadow-opacity: 0.21;
    }

@media (width < 600px) {
    .apo-card-cta-navigation {
        --card-body-width: 100%;
    }

        .apo-card-cta-navigation:is(.is-style-tall) {
            --card-padding-block: 2rem;
            --card-padding-inline: 2rem;
        }
}

/* Theme: Primary Navy, Primary, Primary Vivid */
.apo-card-cta-navigation:is(.is-style-theme-primary) {
    --_body-bg: var(--bs-primary);
}

.apo-card-cta-navigation:is(.is-style-theme-primary-navy) {
    --_body-bg: var(--bs-primary-navy);
}

.apo-card-cta-navigation:is(.is-style-theme-primary-vivid) {
    --_body-bg: var(--bs-primary-vivid);
}

.apo-card-cta-navigation__wrapper {
    --card-body-row-height: clamp(6.25rem, -5.2267rem + 48.8372cqi, 11.5rem);
    grid-template-rows: var(--card-image-row-height) minmax(var(--card-body-row-height, 0px), 1fr);
}

.apo-card-cta-navigation__image {
    grid-column: var(--card-image-column, 1 / -1);
    grid-row: var(--card-image-row, 1 / span 2);
    z-index: -1;
}

    .apo-card-cta-navigation__image > img {
        inset: 0;
    }

    /* Video playback icon (@container) */
    .apo-card-cta-navigation__image > svg {
        bottom: 1rem;
        right: 1.5rem;
        visibility: var(--card-video-icon, hidden);
        transition: scale 0.75s var(--apo-easing-out);
        scale: var(--card-video-icon-scale, 1);
        transform-origin: bottom right;
    }

.apo-card-cta-navigation__title {
    font-size: var(--card-fs-title, clamp(1.75rem, -0.436rem + 9.3023cqi, 2.75rem));
    line-height: 1;
}

    .apo-card-cta-navigation__title > span {
        word-break: break-word;
    }

.apo-card-cta-navigation__body {
    grid-column: var(--card-body-column, 1 / -1);
    grid-row: var(--card-body-row, 2);
    gap: clamp(1rem, -1.186rem + 9.3023cqi, 2rem);
    padding-block: var(--card-padding-block);
    padding-inline: var(--card-padding-inline);
    width: var(--card-body-width);
    color: var(--_body-fg, var(--bs-white));
    background-color: var(--_body-bg, var(--bs-primary-navy));
    justify-content: var(--card-body-alignment, start);
    transition: width 0.75s var(--apo-easing-out);
}

.apo-card-cta-navigation__summary {
    font-size: clamp(0.875rem, 0.3285rem + 2.3256cqi, 1.125rem);
    line-height: 1.444;
}

.apo-card-cta-navigation__summary,
.apo-card-cta-navigation__title > span {
    max-width: var(--card-body-maxwidth, calc(27.5rem - (var(--card-padding-inline) * 2)));
}

.apo-card-cta-navigation__link {
    border: none;
    background-color: transparent;
    color: currentColor;
    padding: 0;
}

    /* Video playback icon */
    .apo-card-cta-navigation__link > svg {
        display: var(--card-video-icon, block);
    }

@container card-cta-navigation (width >= 34.375rem) {
    .apo-card-cta-navigation__wrapper {
        --card-layout-rows: auto;
        --card-body-alignment: center;
        aspect-ratio: auto !important;
        display: flex;
    }

    .apo-card-cta-navigation__image {
        --card-image-column: 1;
        --card-image-row: 1;
        --card-video-icon: visible;
        aspect-ratio: 548 / 304;
        min-height: 100%;
        flex: 0 0 min(44cqi, 34.25rem);
    }

    .apo-card-cta-navigation__body {
        --card-body-column: 2;
        --card-body-row: 1;
        --card-body-width: auto;
        --card-body-maxwidth: none;
        min-height: 100%;
        flex: 1 1 auto;
        transition: box-shadow 0.75s var(--apo-easing-out);
        box-shadow: var(--card-body-shadow-offset-x, 0px) var(--card-body-shadow-offset-y, 0px) var(--card-body-shadow-radius, 0px) 0px hsla(0, 0%, 0%, var(--card-body-shadow-opacity, 0)) inset;
        will-change: box-shadow;
    }

    .apo-card-cta-navigation__link {
        --card-video-icon: none;
    }
}
/* Apply default colour theme when placed within a multi-column grid. */
: where(.sf_colsIn:nth-child(2) > .apo-card-cta-navigation:not([class*="is-style-theme"])) {
    --_body-bg: var(--bs-primary);
}

:where(.sf_colsIn:nth-child(3) > .apo-card-cta-navigation:not([class*="is-style-theme"])) {
    --_body-bg: var(--bs-primary-vivid);
}