.hero.hero-triptych {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(min-content, 30.47%);
  height: 100vh;
  height: 100dvh;
}

.film-window {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  container-type: size;
}

.film-wall {
  --tilt: 3deg;
  position: absolute;
  top: 50%;
  left: 50%;
  /* Rotate the window's four corners into the wall's coordinate system. */
  width: calc(100% + 5.25vh + 4px);
  height: calc(100% + 5.25vw + 4px);
  width: calc(100cqw * cos(var(--tilt)) + 100cqh * sin(var(--tilt)) + 4px);
  height: calc(100cqh * cos(var(--tilt)) + 100cqw * sin(var(--tilt)) + 4px);
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--tilt)));
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  min-height: 0;
  background: #2756cb;
}

.film-lane {
  /* Overlap fractional edges when the three lanes are rasterized at an angle. */
  margin-block: -.5px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

.film-wall .filmstrip {
  animation-delay: calc(var(--period) * var(--film-phase));
  transform: translateX(calc(50% * var(--film-phase)));
}

.film-wall .reel picture {
  display: block;
  /* The four other photos span the window before a photo can repeat. */
  min-width: calc((100vw + 5.25vh + 4px) / var(--unique-run));
  min-width: calc(100cqw / var(--unique-run));
  height: 100%;
  width: calc(23vh * var(--frame-ratio));
  width: calc(100cqh * var(--frame-ratio));
}

.film-wall .reel img {
  max-width: none;
  width: calc(100% + 1px);
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-triptych .hero-band {
  position: relative;
  inset: auto;
  min-height: 0;
}

@media (max-width: 680px) {
  .hero.hero-triptych { grid-template-rows: minmax(0, 1fr) minmax(min-content, 28%); }
}

@media (min-aspect-ratio: 2/1) and (min-width: 681px) {
  .hero-triptych .hero-band { padding-block: clamp(10px, 2.4vh, 24px); }
  .hero-triptych h1 { font-size: clamp(40px, 11vh, 100px); }
}