.tilted-posters {
  position: relative;
  height: clamp(290px, 44vw, 500px);
  max-width: 1240px;
  margin-inline: auto;
  overflow: hidden;
  perspective: 1600px;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.tilted-posters__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(110%, 720px);
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: 8px;
  transform: translate(-50%, -30%) rotateX(32deg) rotateY(var(--rotate-y)) rotateZ(-15deg);
}

.tilted-posters__track {
  animation: tilted-poster-scroll var(--duration) linear infinite;
  animation-delay: calc(var(--phase) * -2.8s);
}

.tilted-posters__track:nth-child(even) { animation-direction: reverse; }
.tilted-posters:is(:hover, :focus-within, [data-paused="true"]) .tilted-posters__track {
  animation-play-state: paused;
}

.tilted-posters__loop {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

.tilted-posters__loop button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.tilted-posters__loop img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@keyframes tilted-poster-scroll {
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .tilted-posters { height: auto; mask-image: none; }
  .tilted-posters__plane {
    position: static;
    width: min(100% - 32px, 1120px);
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 115px), 1fr));
    transform: none;
  }
  .tilted-posters__track { animation: none; }
  .tilted-posters__loop[aria-hidden],
  .tilted-posters__loop button:not(:first-child),
  .tilted-posters__controls { display: none; }
}