.gallery-hero {
  align-items: center;
  background: var(--green);
  color: white;
  display: grid;
  gap: clamp(45px, 7vw, 90px);
  grid-template-columns: .85fr 1.15fr;
  min-height: 640px;
  overflow: hidden;
  padding: 85px max(28px, calc((100vw - 1180px) / 2));
}

.gallery-hero .kicker { color: #f0c75e; }
.gallery-hero-copy h1 { font-size: clamp(4rem, 7vw, 7rem); letter-spacing: -.04em; margin: 22px 0 24px; }
.gallery-hero-copy p:last-child { color: rgba(255,255,255,.76); max-width: 520px; }

.gallery-hero-stack {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr .8fr;
  min-height: 470px;
}

.gallery-hero-stack img {
  box-shadow: 0 24px 50px rgba(0,0,0,.22);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gallery-hero-stack img:first-child { grid-row: span 2; }
.gallery-hero-stack img:nth-child(2) { min-height: 225px; }
.gallery-hero-stack img:nth-child(3) { min-height: 225px; }

.gallery-section {
  margin: auto;
  max-width: 1240px;
  padding: 120px 28px 20px;
}

.gallery-intro {
  align-items: end;
  display: grid;
  gap: 35px;
  grid-template-columns: .45fr 1fr;
  margin-bottom: 55px;
}

.gallery-intro h2 {
  color: var(--brown);
  font-size: clamp(3rem, 5vw, 5rem);
}

.gallery-grid {
  display: grid;
  gap: 18px;
  grid-auto-flow: dense;
  grid-auto-rows: 210px;
  grid-template-columns: repeat(4, 1fr);
}

.gallery-item {
  background: var(--paper);
  border: 1px solid var(--line);
  min-height: 210px;
  overflow: hidden;
}

.gallery-item img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
  width: 100%;
}

.gallery-item:hover img { transform: scale(1.04); }
.gallery-wide { grid-column: span 2; }
.gallery-tall { grid-row: span 2; }

@media (max-width: 900px) {
  .gallery-hero { grid-template-columns: 1fr; }
  .gallery-hero-stack { min-height: 520px; }
  .gallery-intro { align-items: start; grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .gallery-hero { min-height: auto; padding: 70px 22px; }
  .gallery-hero-stack { gap: 12px; min-height: 420px; }
  .gallery-section { padding: 90px 18px 10px; }
  .gallery-grid { gap: 12px; grid-auto-rows: 190px; grid-template-columns: 1fr; }
  .gallery-wide, .gallery-tall { grid-column: span 1; grid-row: span 1; }
}