.apo-card-portfolio-promo {
    --card-min-height: 0;
    --card-block-padding: 3rem;
    --card-image-position: 66% 50%;
    --card-content-max-width: calc(100% - 2rem);
    container: portfolio-promo / inline-size;
    padding-block: var(--card-block-padding);
    min-height: var(--card-min-height);
    isolation: isolate;
}

    .apo-card-portfolio-promo:is(.is-visible) {
        --card-content-offset-y: 0;
        --card-content-opacity: 1;
    }

@media (width >= 37.5rem) {
    .apo-card-portfolio-promo {
        --card-image-position: 60% 50%;
        --card-min-height: 32.1875rem;
        --card-content-max-width: min(66.75rem, 70cqi);
    }
}

.apo-card-portfolio-promo__image {
    inset: 0;
    z-index: -1;
    object-position: var(--card-image-position);
}

.apo-card-portfolio-promo__text {
    max-width: var(--card-content-max-width);
    opacity: var(--card-content-opacity, 0);
    transform: translateY(var(--card-content-offset-y, 1.25rem));
    transition: opacity 0.75s var(--apo-easing-out), transform 2.25s var(--apo-easing-out);
}