.work-marquee {
  --marquee-unit: clamp(200px, 22vw, 340px);
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.marquee-row {
  overflow: hidden;
  width: 100%;
  cursor: grab;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-3);
  will-change: transform;
}

.marquee-item {
  flex: 0 0 auto;
  width: var(--marquee-unit);
}

/* Landscape (3:2) tiles: grow to match the portrait (2:3) tiles' height
   instead of sharing their width, so every tile in a row lines up top
   and bottom. Ratio stays 3:2 — only the scale changes. */
.marquee-item--landscape {
  width: auto;
}

.marquee-item--landscape .placeholder-media,
.marquee-item--landscape .marquee-photo {
  width: auto;
  height: calc(var(--marquee-unit) * 1.5);
}

@media (min-width: 768px) {
  .work-marquee {
    margin-top: var(--space-7);
    gap: var(--space-4);
  }
}