/* The original full-width logo slider now follows the About grid. */
.project-marquee {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.project-marquee-track {
  display: flex;
  width: max-content;
}
.project-marquee-track.is-ready {
  animation: project-marquee-scroll var(--project-marquee-duration, 28s) linear infinite;
  animation-play-state: paused;
}
.project-marquee-track.is-playing { animation-play-state: running; }

.project-marquee-group {
  display: flex;
  flex: none;
  gap: 4px;
  padding-right: 4px;
}
.project-marquee-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 280px;
  height: 136px;
  background: var(--warm-surface);
  border-radius: 5px;
  color: var(--ink);
}
.project-marquee-mark img { display: block; width: 225px; height: 120px; max-width: 100%; object-fit: contain; filter: grayscale(1); }

@keyframes project-marquee-scroll { to { transform: translateX(var(--project-marquee-step)); } }

@media (max-width: 560px) {
  .project-marquee-group { gap: 4px; padding-right: 4px; }
  .project-marquee-mark { width: 208px; height: 104px; }
  .project-marquee-mark img { width: 176px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-marquee-track { width: 100%; }
  .project-marquee-track.is-ready { animation: none; }
  .project-marquee-group { width: 100%; flex-wrap: wrap; justify-content: center; }
  .project-marquee-group + .project-marquee-group { display: none; }
}