.screenshot-gallery { width: 100%; }

.screenshot-gallery__track {
  display: flex;
  gap: var(--site-spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--site-spacing-sm) 0 var(--site-spacing-md);
  scrollbar-width: thin;
  scrollbar-color: var(--site-color-primary) transparent;
}

.screenshot-gallery__track::-webkit-scrollbar { height: 8px; }
.screenshot-gallery__track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--site-color-primary) 50%, transparent);
  border-radius: var(--site-radius-full);
}

.screenshot-gallery__figure {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: center;
  background: transparent;
}

.screenshot-gallery__image {
  width: 220px;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow-lg);
  background: var(--site-color-surface);
  transition: transform var(--site-transition-fast);
}

.screenshot-gallery__image:hover { transform: translateY(-4px); }

.screenshot-gallery__empty {
  padding: var(--site-spacing-lg);
  border: 1px dashed var(--site-color-border);
  border-radius: var(--site-radius-md);
  color: var(--site-color-text-muted);
  text-align: center;
}

@media (min-width: 640px) {
  .screenshot-gallery__image { width: 240px; }
}
@media (min-width: 1024px) {
  .screenshot-gallery__track { scroll-snap-type: none; }
  .screenshot-gallery__image { width: 260px; }
}