.gallery-section {
  padding: 115px max(30px, calc((100vw - 1240px) / 2));
}

.gallery-heading {
  margin-bottom: 44px;
}

.gallery-heading h2 {
  margin: 0;
  font-family: "Libre Caslon Display", serif;
  font-size: clamp(2.7rem, 4.3vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.025em;
}

.gallery-heading .eyebrow {
  margin-bottom: 9px;
}

.gallery-photo {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #d9ddd5;
}

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

.stay-gallery {
  background: #f8f6ef;
}

.stay-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}

.stay-gallery-grid .gallery-photo--wide,
.stay-gallery-grid .gallery-photo--portrait {
  grid-column: span 6;
  aspect-ratio: 4 / 3;
}

.area-gallery {
  color: white;
  background: var(--green);
}

.gallery-heading--light .eyebrow {
  color: var(--lime);
}

.area-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.area-gallery-grid .gallery-photo {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  background: #214b45;
}

.area-gallery-grid figcaption {
  position: absolute;
  left: 50%;
  right: 2.8%;
  bottom: 3.8%;
  height: 10.7%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 4% 0 3.6%;
  border-radius: 1.65cqw;
  background: #103433;
  color: #fff;
  font: 700 1.9cqw/1.15 Arial, sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.area-gallery-grid figcaption::before {
  content: '';
  flex: none;
  width: .55cqw;
  height: 55%;
  border-radius: 1rem;
  background: #d9ff5b;
}

.area-gallery-grid figcaption .place {
  flex: 1;
}

.area-gallery-grid figcaption .distance {
  flex: none;
  color: #d9ff5b;
  font-size: 1.22em;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .gallery-section {
    padding: 90px 30px;
  }

  .stay-gallery-grid,
  .area-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stay-gallery-grid .gallery-photo--wide,
  .stay-gallery-grid .gallery-photo--portrait {
    grid-column: span 1;
  }

  .stay-gallery-grid .gallery-photo--wide,
  .stay-gallery-grid .gallery-photo--portrait {
    aspect-ratio: 4 / 3;
  }

}

@media (max-width: 620px) {
  .gallery-section {
    padding: 78px 0;
  }

  .gallery-heading {
    margin-bottom: 30px;
    padding: 0 24px;
  }

  .stay-gallery-grid,
  .area-gallery-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 12px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 0 24px 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    touch-action: pan-x pan-y;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stay-gallery-grid::-webkit-scrollbar,
  .area-gallery-grid::-webkit-scrollbar {
    display: none;
  }

  .stay-gallery-grid .gallery-photo,
  .area-gallery-grid .gallery-photo,
  .area-gallery-grid .gallery-photo:nth-child(1),
  .area-gallery-grid .gallery-photo:nth-child(4) {
    grid-column: auto;
    width: 82vw;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .stay-gallery-grid .gallery-photo--portrait {
    width: 82vw;
    aspect-ratio: 4 / 3;
  }

  .gallery-photo img {
    -webkit-user-drag: none;
    user-select: none;
  }
}