/* Media geometry only. Keep colours and type in their existing stylesheets. */
:root {
  --media-portrait: 3 / 4;
  --media-landscape: 3 / 2;
  --media-square: 1 / 1;
}
img[data-media-ratio], video[data-media-ratio] { object-fit: cover; }
[data-media-ratio="portrait"] { aspect-ratio: var(--media-portrait); }
[data-media-ratio="landscape"] { aspect-ratio: var(--media-landscape); }
[data-media-ratio="square"] { aspect-ratio: var(--media-square); }
/* Source-pixel caps prevent stretching small photographs to fill larger slots. */
img[data-media-ratio] { max-width: min(100%, var(--media-max-width, 100%)); }
body[data-mode] #top .hero-figure img {
  height: auto; aspect-ratio: var(--media-portrait);
}
body[data-mode="auto"] #top .hero-figure img { aspect-ratio: var(--media-landscape); }
body .landing-hero-media { min-height: 0; height: auto; align-self: start; }
body .landing-hero-media img { display: block; height: auto; aspect-ratio: var(--media-portrait); }
body .services-figure img { height: auto; aspect-ratio: var(--media-portrait); }
/* One shape and one column width within each gallery row. */
body[data-mode="auto"] #gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-mode="auto"] #gallery .gallery-item,
body[data-mode="auto"] #gallery .gallery-feature .gallery-item {
  height: auto; aspect-ratio: var(--media-portrait); max-width: 506px;
}
body[data-mode="auto"] #gallery .gallery-item img { height: 100%; aspect-ratio: var(--media-portrait); }
body[data-mode] .work-item-wide,
body[data-mode="auto"] #gallery .gallery-feature { grid-column: auto; }
body[data-mode] .work-item-wide .work-open { min-height: 0; height: auto; }
body[data-mode] .work-open img, body[data-mode] .work-item-wide .work-open img {
  position: static; display: block; height: auto; aspect-ratio: var(--media-portrait);
}
body .truck-figure img { height: auto; aspect-ratio: var(--media-portrait); }
/* A separate poster remains underneath the video, including after a decode/network error. */
body[data-mode] .work-play { max-width: 480px; height: auto; aspect-ratio: var(--media-portrait); }
body[data-mode] .work-play .video-poster {
  display: block; position: static; width: 100%; height: auto; aspect-ratio: var(--media-portrait);
}
body[data-mode] .work-play .work-video {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: var(--media-portrait);
}
body[data-mode="auto"] .commercial-film .work-play { max-width: 540px; height: auto; aspect-ratio: var(--media-landscape); }
body[data-mode="auto"] .commercial-film :is(.video-poster, .work-video) { aspect-ratio: var(--media-landscape); }
body .work-play.has-media-error video { visibility: hidden; }
/* Identical square comparison slots; the shortest source edge is 398px. */
body[data-mode="auto"] .ba-grid > li,
body[data-mode="auto"] .ba-grid > li.ba-tall { width: min(100%, 398px); }
body[data-mode="auto"] .ba-slider,
body[data-mode="auto"] .ba-slider img { aspect-ratio: var(--media-square); }
body .instagram-grid a, body .instagram-grid img { aspect-ratio: var(--media-square); }
/* Functional artwork is never cropped: logos and the full-image/price-board viewer. */
img[data-media-logo] { aspect-ratio: var(--media-logo-ratio); object-fit: contain; }
body .gallery-dialog img {
  display: block; width: 100%; height: auto; max-height: none;
  aspect-ratio: var(--media-square); object-fit: contain;
}
body .gallery-dialog { width: min(1050px, calc(100% - 2rem), 78vh, var(--dialog-image-limit, 1050px)); }
@media (max-width: 760px) {
  body[data-mode="auto"] #gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}