/* Give photographs room to breathe on phones without changing the desktop layout. */
@media (max-width: 767px) {
  #our-story .statement-inner { gap: 36px; }
  #our-story .statement-collage {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    aspect-ratio: auto;
    gap: 4px;
  }
  #our-story .collage-photo--main { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
  #our-story .collage-photo--a { grid-column: 1; grid-row: 2; aspect-ratio: 1; }
  #our-story .collage-photo--b { grid-column: 2; grid-row: 2; aspect-ratio: 1; }
  #our-story .statement-body { font-size: 15px; line-height: 1.9; }
  #our-story .statement-body br { display: none; }

  #our-features .moments-composition { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  #our-features .moment-photo {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 4 / 3;
  }
  #our-features .moment-copy { padding-top: 24px; }
  #our-features .moment-copy p { font-size: 15px; line-height: 1.85; }
  #our-features .moment-room-link,
  #our-story .link-arrow { min-height: 44px; }

  .home-neighborhood .village-image {
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 4 / 3;
  }
  .home-neighborhood .village-image img { width: 100%; height: 100%; object-fit: cover; }
  .home-neighborhood .village-copy { margin-top: 28px; }

  .rooms-page .room-hero-img { height: clamp(300px, 80vw, 520px); }
  .rooms-page .room-content { padding-inline: var(--gutter); }
  .rooms-page .gallery-scroll-wrap { margin-inline: calc(var(--gutter) * -1); }
  .rooms-page .gallery-scroll {
    grid-template-rows: clamp(260px, 78vw, 480px);
    grid-auto-columns: calc(100% - 32px);
    gap: 8px;
    padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
  }
  .rooms-page .gallery-item,
  .rooms-page .gallery-item.portrait,
  .rooms-page .gallery-item.landscape {
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: start;
  }
  .rooms-page .gallery-item.portrait img { object-fit: contain; }
  .rooms-page .gallery-item:hover img { transform: none; }
  .rooms-page .gallery-arrow {
    top: 50%; bottom: auto; margin-top: -22px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(247, 245, 237, .94);
    box-shadow: 0 2px 12px rgba(29, 40, 38, .12);
    color: var(--ink); opacity: 1; font-size: 28px;
  }
  .rooms-page .gallery-arrow--prev { left: 22px; }
  .rooms-page .gallery-arrow--next { right: 22px; }
}