.gallery { padding: clamp(32px, 6vw, 88px) 5%; }
.gallery h1, .gallery-intro { text-align: center; }
.gallery-intro { color: #37472f; font-size: 1.2rem; }
.gallery section { max-width: 1320px; margin: 48px auto 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; margin-top: 20px; }
.gallery figure { margin: 0; border-radius: 20px; overflow: hidden; background: #eef1db; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f3ecd7; }
.gallery figcaption { padding: 14px 16px; font-weight: 800; }

.gallery-story .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-story img { object-fit: cover; }
.gallery-story figure { border-radius: 14px; }
.gallery-story h2 { margin-bottom: 12px; }
@media (max-width: 700px) {
  .gallery-story .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-story figure:first-child { grid-column: 1 / -1; }
}


.gallery { padding-top: 0; }
.gallery-banner {
  display: flex;
  align-items: center;
  aspect-ratio: 3;
  margin-inline: -5.556%;
  padding-inline: 10.2%;
  background: #fff1da url('assets/gallery-press-banner.png.webp') center / cover no-repeat;
}
.gallery-banner-copy { transform: translateY(-5%); }
.gallery-banner h1 {
  margin: 0;
  text-align: left;
  color: #21451a;
  font-size: clamp(32px, 8.5vw, 190px);
  letter-spacing: -.035em;
  font-weight: 900;
}
.gallery-banner p {
  display: inline-block;
  margin: .2em 0 0;
  padding: .14em .85em;
  border-radius: 999px;
  background: #ffc331;
  color: #21451a;
  font-size: clamp(13px, 2.55vw, 58px);
  font-weight: 900;
}

.gallery-products img { object-fit: contain; }
.gallery-products .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.gallery-products figure:first-child { grid-column: auto; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-reveal { transition: opacity .55s ease, transform .55s ease; transition-delay: var(--gallery-delay, 0ms); }
  .gallery-pending { opacity: 0; transform: translateY(14px); }
  .gallery-reveal:focus-within { opacity: 1; transform: none; transition: none; }
  .gallery-grid img { transition: transform .45s ease; }
  .gallery-grid a:is(:hover, :focus-visible) img { transform: scale(1.035); }
}

.gallery-products .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gallery-grid img { height: auto; }