/* ============================================================
   PHOTO CAROUSEL — PARALLAX HORIZONTAL SCROLL
   ============================================================ */

#photos {
  background-color: var(--color-cream);
  padding: var(--space-section-desktop) 0;
  overflow: hidden;
}

.carousel__strip {
  display: flex;
  gap: var(--space-component);
  padding: 0 var(--space-section-desktop);
  will-change: transform;
  flex-shrink: 0;
}

.carousel__item {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 420px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
}

.carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  #photos {
    padding: var(--space-section-mobile) 0;
  }

  .carousel__strip {
    padding: 0 var(--space-component);
    gap: var(--space-element);
  }

  .carousel__item {
    width: 72vw;
  }
}