/* Full-image split heroes: let the image ratio determine its desktop height.
   Background heroes and the established mobile rules remain separate. */
@media (min-width: 576px) {
    .cf-content .cf-hero.cf-hero-fit-contain.cf-hero-height-compact:is(.cf-hero-imageLeft, .cf-hero-imageRight) {
        min-height: 0;
        align-items: center;
    }
    .cf-content .cf-hero.cf-hero-fit-contain.cf-hero-height-compact:is(.cf-hero-imageLeft, .cf-hero-imageRight) .cf-hero-image {
        width: 100%;
        height: auto;
        aspect-ratio: var(--cf-source-aspect, 1.5);
        max-height: 520px;
        align-self: center;
    }
    .cf-content .cf-hero.cf-hero-fit-contain.cf-hero-height-compact:is(.cf-hero-imageLeft, .cf-hero-imageRight) .cf-hero-copy {
        min-height: 0;
    }

    /* Auto-height editorial cards need room for a complete scene. Keep the
       same frame for mixed square/landscape images and retain contain. */
    .cf-content.cf-editorial .cf-presentation-default .cf-tiles-card.cf-layout-equal.cf-height-auto > .cf-tile.cf-fit-contain:not(.cf-tile-surface-image) > .cf-tile-image {
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 360px;
        padding: 0;
        position: relative;
    }
    .cf-content.cf-editorial .cf-presentation-default .cf-tiles-card.cf-layout-equal.cf-height-auto > .cf-tile.cf-fit-contain:not(.cf-tile-surface-image) > .cf-tile-image > .cf-image {
        position: absolute;
        inset: 0;
    }
}