[data-scroll-screen] {
  display: grid;
  position: relative;
  gap: .7rem;
}

[data-scroll-screen] > :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

[data-scroll-screen] video { display: none; }
[data-scroll-screen].has-video video {
  display: block;
  grid-area: 1 / 1;
}
[data-scroll-screen].has-video img:first-child { grid-area: 1 / 1; }

.has-scroll-clip [data-scroll-screen] { gap: 0; }
.has-scroll-clip [data-scroll-screen] > * { grid-area: 1 / 1; }
.has-scroll-clip [data-scroll-frame] { opacity: 0; }
.has-scroll-clip [data-scroll-frame].is-current { opacity: 1; }
.has-scroll-clip [data-scroll-screen] video { display: block; opacity: 0; }
.has-scroll-clip [data-scroll-screen].has-video video { opacity: 1; }

[data-scroll-replay] {
  min-height: 44px;
  padding: .25rem .7rem;
  border: 0;
  color: inherit;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: .25em;
}