.work-gallery {
  padding-block: clamp(4rem, 7vw, 7.5rem);
  border-top: 1px solid var(--line);
}

.work-gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem clamp(2rem, 7vw, 8rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.work-gallery-kicker {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--gold-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.work-gallery-intro h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.work-gallery-intro > p:last-child {
  max-width: 48ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
}
@media (min-width: 1024px) { .work-gallery-intro > p:last-child { font-size: 1.125rem; } }

/* Rows of equal height. The before/after comparison is shown whole and sets the first row;
   the lash photograph fills the same height. Every other photograph shares one 4:5 frame,
   cropped to its own focal point, so the captions line up. */
.work-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

.work-shot {
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-width: 0;
  margin: 0;
}

.work-shot--lead { grid-column: span 8; }
.work-shot-media {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--graphite-soft);
}
.work-shot picture { display: block; }
.work-shot-media picture,
.work-shot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.work-shot img {
  display: block;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.work-shot--lead .work-shot-media { aspect-ratio: auto; background: transparent; }
.work-shot--lead .work-shot-media picture,
.work-shot--lead .work-shot-media img { position: static; height: auto; }
.work-shot--lead img { object-fit: contain; }
/* Translated pills over the ones printed into the legacy comparison photo: anchored to the
   printed pills' lower-left corners and never smaller than them, so the German never shows. */
.work-compare { position: relative; display: block; }
.work-compare-label {
  position: absolute;
  bottom: 3.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.8%;
  padding: 0.2rem 0.7rem;
  border-radius: 0.35rem;
  background: rgb(208 187 156);
  color: var(--graphite);
  font-size: clamp(0.8125rem, 0.6rem + 0.45vw, 1rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.work-compare-label.is-before { left: 4.3%; min-width: 13.9%; }
.work-compare-label.is-after { left: 52.7%; min-width: 15.5%; }
.work-shot--accent .work-shot-media { aspect-ratio: auto; min-height: 16rem; }

.work-shot figcaption { border-bottom: 1px solid var(--line-strong); }
/* Long German treatment names have to be able to break inside a two-up wall. */
.work-shot figcaption a > span { min-width: 0; overflow-wrap: break-word; }
.work-shot figcaption a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 3.75rem;
  align-items: center;
  gap: 1rem;
  color: var(--graphite);
  text-decoration: none;
}
.work-shot figcaption a:hover > span:first-child { text-decoration: underline; text-underline-offset: 0.25em; }

.work-shot .arrow-icon { width: 1.1rem; height: 1.1rem; transition: transform var(--motion-base) var(--ease-out); }
.work-shot figcaption a:hover .arrow-icon,
.work-shot figcaption a:focus-visible .arrow-icon { transform: translateX(0.3rem); }
.work-shot figcaption a:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 4px; }

.work-gallery--catalog { padding-top: 1rem; }

/* Tablets: the comparison on its own row, the four photographs as one row below it.
   Phones: a two-by-two wall. */
@media (max-width: 1199px) {
  .work-shot,
  .work-shot--accent { grid-column: span 3; }
  .work-shot--lead { grid-column: span 12; }
  .work-shot--accent .work-shot-media { aspect-ratio: 4 / 5; min-height: 0; }
  .work-shot figcaption a { font-size: 1rem; }
}
@media (max-width: 767px) {
  .work-shot:not(.work-shot--lead) { grid-column: span 6; }
}

@media (max-width: 767px) {
  .work-gallery-intro { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .work-gallery-grid { gap: 1.25rem 0.75rem; }
  .work-shot figcaption a { min-height: 3.25rem; gap: 0.5rem; padding-block: 0.5rem; font-size: 1rem; }
}