.pixel-marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

.pixel-track {
  display: flex;
  width: max-content;
  animation: pixel-scroll 42s linear infinite;
  will-change: transform;
}

.pixel-marquee:hover .pixel-track {
  animation-play-state: paused;
}

.pixel-set {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding-right: 3px;
  flex: none;
}

.pixel-set img {
  width: auto;
  max-width: none;
  height: 305px;
  flex: none;
  filter: drop-shadow(0 12px 5px rgba(0, 0, 0, .16));
  image-rendering: pixelated;
}

.pixel-note {
  position: relative;
  z-index: 3;
  background: rgba(34, 73, 131, .15);
}

@keyframes pixel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .pixel-set img { height: 270px; }
}

@media (max-width: 600px) {
  .pixel-track { animation-duration: 34s; }
  .pixel-set img { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-track { animation: none; }
}