.apo-card-pagehero {
    --pagehero-content-block-padding: 4.25rem 3rem;
    --pagehero-title-fs: var(--apo-fluid-32-64);
    --pagehero-image-position: 60% 0%;
    /* start: placement within proper region container (.region-hero) */
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    /* end: placement */
    padding-inline: var(--apo-page-gutter);
    background: var(--bs-primary);
    overflow: clip;
    isolation: isolate;
}

    .apo-card-pagehero:not(.is-front-page)::after {
        content: '';
        background: linear-gradient(180deg, var(--bs-primary-navy) 0%, hsla(203, 96%, 38%, 0) 100%);
        inset: 0 0 auto;
        position: absolute;
        height: 53.5%;
        z-index: -1;
        opacity: 0.4;
    }

    .apo-card-pagehero:is(.is-front-page) {
        --pagehero-bg-height-offset: 1.875rem;
        --pagehero-title-fs: var(--apo-fluid-36-100);
        background: var(--bs-primary-navy) linear-gradient(180deg, #1D4492 0%, #3D7F96 100%);
    }

@media (width >= 37.5rem) {
    .apo-card-pagehero {
        --pagehero-content-width: min(41.25rem, 75cqi);
    }
}

@media (width >= 992px) {
    .apo-card-pagehero {
        --pagehero-image-position: clamp(0rem, 41.3514rem + -34.4595vw, 31.875rem) 100%;
        --pagehero-content-block-padding: clamp(1.5rem, 0.5rem + 2.0833vw, 3rem);
    }

        .apo-card-pagehero:is(.is-front-page) {
            --pagehero-bg-height-offset: 6.75rem;
        }
}

@media (992px <= width < 120rem) {
    .apo-card-pagehero:is(.is-front-page) {
        --pagehero-image-position: calc(100% + 16dvw) 0%;
    }
}

.apo-card-pagehero__wrapper {
    grid-row: 2;
    container: pagehero / inline-size;
}

.apo-card-pagehero__bg {
    pointer-events: none;
    right: clamp(-5.625rem, -15.5417rem + 20.6597vw, 9.25rem);
    top: 0;
    z-index: -1;
    aspect-ratio: 1118 / 1154;
    width: auto;
    height: 187.64%;
    transform: translateY(-21.28%);
}

/* The assumption is a full-width banner image; however to get exact placement 
we override this on the page level to use a custom size image and 
positioning */
.apo-card-pagehero__image {
    z-index: -1;
    /*    right: 0;
    bottom: 0;
    width: auto;
    object-position: var(--pagehero-image-position);
    object-fit: contain;*/
    pointer-events: none;
    transform: scale(0.95) translateY(15px);
    transform-origin: 50% 100%;
    animation: scaleUp 5s cubic-bezier(0.44, 0, 0.56, 1) 0.2s forwards;
}

@media (width < 37.5rem) {
    .apo-card-pagehero__image {
        width: 100%;
        object-fit: cover;
    }
}

.apo-card-pagehero__content {
    padding-block: var(--pagehero-content-block-padding);
    max-width: var(--pagehero-content-width, none);
}

.apo-card-pagehero__title {
    font-size: var(--pagehero-title-fs);
    line-height: 1;
    word-spacing: 0.2ch;
}

.apo-card-pagehero:is(.is-front-page) .apo-card-pagehero__link {
    margin-block-start: clamp(1rem, -1.1667rem + 4.5139vw, 4.25rem);
}

@keyframes scaleUp {
    to {
        transform: scale(1) translateY(0);
    }
}