/* Shared hero artwork layers (web/js/hero-swipe.js). Only the layers move; the hero clips them.
 * Hidden layers are not painted, so the transform start/end never shows through. */
.hero-swipe { position: relative; overflow: hidden; isolation: isolate; }
.hero-swipe__layer { position: absolute; inset: 0; z-index: -2; visibility: hidden; background-size: cover; background-position: center;
    will-change: transform; }
.hero-swipe__layer.is-active, .hero-swipe__layer.is-moving { visibility: visible; }
.hero-swipe__layer img { display: block; width: 100%; height: 100%; object-fit: cover;
    object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
@media (max-width: 767.98px) { .hero-swipe__layer img { object-position: var(--focal-mx, var(--focal-x, 50%)) var(--focal-y, 50%); } }