.hero-media > picture.hero-photo {
    --hero-x: var(--hero-desktop-x, 50%);
    --hero-y: var(--hero-desktop-y, 100%);
    --hero-zoom: var(--hero-desktop-zoom, 1);
    --hero-ratio: var(--hero-desktop-ratio, 1);
    position: relative;
    container-type: size;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-media > picture.hero-photo > img {
    display: block;
    position: absolute;
    /* Size the uncropped image to cover first, then zoom the whole image.
       Scaling an object-fit crop would hide pixels even below 100%. */
    width: max(100cqw, calc(100cqh * var(--hero-ratio)));
    height: max(100cqh, calc(100cqw / var(--hero-ratio)));
    max-width: none;
    left: var(--hero-x);
    top: var(--hero-y);
    object-fit: contain;
    transform-origin: var(--hero-x) var(--hero-y);
    transform: translate(calc(-1 * var(--hero-x)), calc(-1 * var(--hero-y))) scale(var(--hero-zoom));
}

@media (max-width: 900px) {
    .hero-media > picture.hero-photo {
        --hero-x: var(--hero-mobile-x, 50%);
        --hero-y: var(--hero-mobile-y, 100%);
        --hero-zoom: var(--hero-mobile-zoom, 1);
        --hero-ratio: var(--hero-mobile-ratio, 1);
    }
}