.parallax-gallery-section {
  background: #fff;  /* #787171 */
  width: 100vw;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-viewport {
  background: #fff;           /* Barrier color */
  max-width: 1520px;
  width: 100vw;
  margin: 0 auto;
  padding: 0 60px;
  border-radius: none;
  box-shadow: 0 2px 24px 0 rgba(50,60,70,0.11);
  overflow: hidden;              /* THIS ENSURES IMAGES DON'T SPILL OUT */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;            /* Ensures children are contained */
  z-index: 2000;
}

.parallax-gallery-grid {
  display: flex;
  flex-direction: row;
  gap: 110px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.parallax-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 110px;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* Default - already perfect with clamp */
.parallax-img {
  width: clamp(180px, 23vw, 340px);
  aspect-ratio: 350 / 410;
  height: auto;
  border-radius: 0.1rem;
  object-fit: cover;
  background: #000000;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.2s;
  cursor: pointer;
  display: block;
  border: none;
}

.parallax-gallery-grid,
.parallax-gallery-col {
  gap: clamp(20px, 6vw, 110px);
}

/* ----- TABLET / IPAD: ≤900px ----- */
@media (max-width: 900px) {
  .gallery-2col {
    max-width: 95vw;
    gap: clamp(20px, 5vw, 48px);
  }
  .gallery-2col .parallax-gallery-col {
    gap: clamp(65px, 5vw, 48px);
  }
  .gallery-2col .parallax-img {
    width: clamp(170px, 40vw, 260px);
    max-width: 260px;
    min-width: 140px;
    border-radius: 0.1rem;
  }
  .gallery-3col {
    display: none !important;
  }
}

/* ----- SMALL TABLET / LARGE PHONE: ≤700px ----- */
@media (max-width: 700px) {
  .gallery-2col {
    max-width: 99vw;
    gap: clamp(12px, 4vw, 32px);
  }
  .gallery-2col .parallax-gallery-col {
    gap: clamp(45px, 4vw, 32px);
  }
  .gallery-2col .parallax-img {
    width: clamp(120px, 44vw, 180px);
    max-width: 180px;
    min-width: 96px;
    border-radius: 0.1rem;
  }
}

/* ----- SMALL PHONE (IPHONE): ≤400px ----- */
@media (max-width: 400px) {
  .gallery-2col .parallax-gallery-col {
    gap: 45px;
  }
  .gallery-2col .parallax-img {
    width: clamp(80px, 45vw, 160px);
    max-width: 160px;
    min-width: 68px;
    border-radius: 0.1rem;
  }
}

.gallery-viewport-scrollable {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  position: relative;
  z-index: 2000;
}

/* Desktop (large screens) */
@media (min-width: 901px) {
  .gallery-viewport {
    height: clamp(70svh, 65vw, 90svh);
  }
}
/* Desktop (≥1200px) */
@media (min-width: 1200px) {
  .gallery-viewport {
   height: clamp(185svh, 180vw, 215svh);
  }
}
/* Tablet */
@media (max-width: 900px) {
  .gallery-viewport {
    height: clamp(150svh, 165vw, 200svh);
  }
}
/* Small Tablet / Large Phone */
@media (max-width: 700px) {
  .gallery-viewport {
    height: clamp(120svh, 140vw, 170svh);
  }
}
/* Small Phone */
@media (max-width: 400px) {
  .gallery-viewport {
    height: clamp(125svh, 160vw, 190svh);
  }
}