.case-image,
.wide-story-image,
.project-gallery figure {
  margin: 0;
  overflow: hidden;
  background: #161814;
}

.case-image {
  position: relative;
  min-height: 500px;
}

.case-image img {
  position: absolute;
  inset: 0;
  filter: saturate(.82) contrast(1.04);
}

.case-image::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(8, 9, 8, .88));
}

.case-image figcaption {
  position: absolute;
  z-index: 1;
  right: 25px;
  bottom: 25px;
  left: 25px;
}

.case-image figcaption span,
.wide-story-image figcaption span,
.project-gallery header span,
.project-gallery figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.55;
  text-transform: uppercase;
}

.case-image figcaption span { color: var(--gold); }
.case-image figcaption strong { display: block; margin-top: 10px; font-size: 24px; font-weight: 400; }
.photo-pair .case-image { min-height: 560px; }
.photo-pair .portrait img { object-position: 50% 44%; }

.wide-story-image {
  position: relative;
  height: min(74vw, 820px);
  margin: 0 5vw 9vw;
}

.wide-story-image img { filter: saturate(.65) brightness(.78); }
.wide-story-image::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8, 9, 8, .9)); }
.wide-story-image figcaption { position: absolute; z-index: 1; right: 35px; bottom: 32px; left: 35px; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.wide-story-image figcaption span { color: var(--gold); }
.wide-story-image figcaption p { max-width: 620px; margin: 0; color: #d4d6cf; font-size: 17px; line-height: 1.65; }

.project-gallery {
  padding: 10vw 5vw;
  background: #0c0d0c;
}

.project-gallery header { display: grid; grid-template-columns: .55fr 1.45fr; margin-bottom: 8vw; }
.project-gallery header span { color: var(--gold); }
.project-gallery h2 { margin: 0; font-size: clamp(54px, 6vw, 96px); font-weight: 300; line-height: .94; letter-spacing: -.065em; }
.gallery-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px 22px; align-items: start; }
.gallery-grid figure { position: relative; }
.gallery-grid img { height: auto; aspect-ratio: 4 / 3; filter: saturate(.83) contrast(1.03); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-grid figure:hover img { transform: scale(1.018); }
.project-gallery figcaption { padding-top: 16px; color: #a5a89f; }
.gallery-shower { grid-row: span 2; }
.gallery-shower img,
.gallery-build img { aspect-ratio: 3 / 4; }
.gallery-social { grid-column: 1 / -1; }
.gallery-social img { aspect-ratio: 16 / 8; }

@media (max-width: 900px) {
  .case-image { min-height: 520px; }
  .wide-story-image { height: 650px; margin: 0 20px 90px; }
  .wide-story-image figcaption { display: block; right: 22px; bottom: 22px; left: 22px; }
  .wide-story-image figcaption p { margin-top: 12px; font-size: 16px; }
  .project-gallery { padding: 90px 20px; }
  .project-gallery header { grid-template-columns: 1fr; gap: 28px; }
  .project-gallery h2 { font-size: 52px; }
  .gallery-grid { gap: 48px 16px; }
}

@media (max-width: 620px) {
  .case-image,
  .photo-pair .case-image { min-height: 470px; }
  .wide-story-image { height: 560px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-shower,
  .gallery-social { grid-column: auto; grid-row: auto; }
  .gallery-social img { aspect-ratio: 4 / 3; }
  .project-gallery h2 { font-size: 46px; }
}