/* ============================================
   PHOTO GALLERY — standalone, responsive
   ============================================ */
.gallery {
  display: flex;
  justify-content: center;
  gap: -12px;          /* Negative gap = overlap */
  flex-wrap: wrap;
  padding: 30px 16px;
}

.gallery__item {
  width: 200px;          /* ← Start small */
  aspect-ratio: 464 / 636; /* Keep original ratio */
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery__item:hover {
  box-shadow: 6px 6px 20px rgba(0,0,0,0.18);
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Full transparent PNG visible */
  display: block;
}

/* Staggered tilt for visual interest */
.gallery__item:nth-child(1) { transform: rotate(2deg); }
.gallery__item:nth-child(2) { transform: rotate(-1.5deg); }
.gallery__item:nth-child(3) { transform: rotate(1deg); }
.gallery__item:nth-child(4) { transform: rotate(-2deg); }
.gallery__item:nth-child(5) { transform: rotate(1.5deg); }
.gallery__item:nth-child(6) { transform: rotate(-0.8deg); }
.gallery__item:nth-child(7) { transform: rotate(2.5deg); }
.gallery__item:nth-child(8) { transform: rotate(-1deg); }

/* ---- Mobile (<600px): stacked, no rotation, max 300px ---- */
@media (max-width: 599px) {
  .gallery {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .gallery__item {
    width: calc(100vw - 32px);
    max-width: 300px;      /* ← Never bigger than 300px */
    transform: none;       /* Straight on mobile */
  }
}

/* ---- Tablet (600–950px): 2-column, growing from 200px ---- */
@media (min-width: 600px) and (max-width: 950px) {
  .gallery {
    flex-direction: row;
    gap: -16px;
  }
  .gallery__item {
    width: calc(50% - 12px); /* Two columns, growing */
    max-width: 300px;         /* Still capped at 300 */
  }
}

/* ---- Desktop (>951px): expand out, straighten ---- */
@media (min-width: 951px) {
  .gallery {
    gap: -8px;
  }
  .gallery__item {
    width: 464px;           /* Full original */
    max-width: 300px;        /* Still capped at 300 */
    transform: none;         /* Straighten on large screens */
  }
}