.scroll-cover {
  --focus-x: 50%;
  --focus-start: 0%;
  --focus-end: 100%;
  --cover-travel: 60svh;
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

.scroll-cover[data-cover-motion="on"].is-pannable {
  min-block-size: 160vh;
  min-block-size: calc(100svh + var(--cover-travel));
}

.scroll-cover-stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.scroll-cover-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--focus-x) var(--cover-focus-y, var(--focus-start));
}

.scroll-cover-copy {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cover[data-cover-motion].is-pannable {
    min-block-size: 100vh;
    min-block-size: 100svh;
  }

  .scroll-cover-image {
    object-position: var(--focus-x) var(--focus-start);
  }
}