.showroom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px) clamp(12px, 1.6vw, 24px);
}
.showroom-grid a { min-width: 0; cursor: zoom-in; }
.showroom-grid a:first-child { grid-row: span 2; }
.showroom-grid figure { height: 100%; display: flex; flex-direction: column; }
.showroom-grid img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.showroom-grid .showroom-upper-crop { object-position: center 25%; }
.showroom-grid a:first-child img { flex: 1; min-height: 0; height: 0; }
.showroom-grid figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 9px; font-size: 14px; line-height: 1.4;
}
.showroom-grid figcaption [aria-hidden] { color: var(--italic-ink); }
.showroom-grid a:hover figcaption span:first-child { text-decoration: underline; text-underline-offset: 3px; }

.showroom-viewer {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0;
  width: max-content; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  color: var(--ink); background: var(--paper); overflow: auto;
}
.showroom-viewer::backdrop { background: rgba(20, 25, 33, .86); }
html:has(.showroom-viewer[open]) { overflow: hidden; }
.showroom-viewer .viewer-image {
  display: block; width: auto; height: auto; margin-inline: auto; max-width: 100%;
  max-height: calc(100dvh - 96px); object-fit: contain;
}
.showroom-viewer button {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; background: var(--paper); color: var(--ink); cursor: pointer;
  font: 23px/1 var(--sans);
}
.showroom-viewer button:hover { color: var(--paper); background: var(--ink); }
.showroom-viewer .viewer-close { position: absolute; top: 8px; right: 8px; }
.viewer-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px; }
.viewer-caption { text-align: center; font-size: 14px; line-height: 1.4; }
@media (max-width: 650px) {
  .showroom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showroom-grid a:first-child, .showroom-grid a:last-child { grid-column: 1 / -1; grid-row: auto; }
  .showroom-grid img { aspect-ratio: 4 / 3; }
  .showroom-grid a:first-child img { height: auto; flex: none; }
  .showroom-grid figcaption { font-size: 13px; }
}