/* Photographs can scale smoothly, unlike the site's pixel-art screendumps. */
.hardware-section { max-width: 1280px; }
.hardware-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.hardware-grid .shot { min-width: 0; }
.hardware-photo { position: relative; cursor: zoom-in; }
.hardware-photo img {
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  image-rendering: auto;
}
.hardware-photo__hint {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 8px;
  background: var(--paper);
  color: var(--ink);
  border-top: var(--hair) solid var(--ink);
  border-left: var(--hair) solid var(--ink);
  font-size: var(--fs-small);
}
.hardware-photo:hover .hardware-photo__hint,
.hardware-photo:focus-visible .hardware-photo__hint {
  background: var(--ink);
  color: var(--paper);
}
main.bands > .hardware-viewer {
  position: fixed;
  margin: auto;
  padding: 0;
  width: min(1440px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.hardware-viewer::backdrop { background: rgb(0 0 0 / 75%); }
html:has(.hardware-viewer[open]) { overflow: hidden; }
.hardware-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: var(--hair) solid var(--ink);
  font-family: var(--font-px);
}
.hardware-viewer__bar .btn { flex-shrink: 0; }
.hardware-viewer figure { margin: 0; }
.hardware-viewer img {
  display: block;
  width: 100%;
  max-height: 70vh;
  max-height: 70dvh;
  object-fit: contain;
  image-rendering: auto;
}
.hardware-viewer figcaption {
  padding: 12px;
  border-top: var(--hair) solid var(--ink);
  font-size: var(--fs-small);
}
@media (max-width: 1100px) {
  .hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hardware-grid { grid-template-columns: minmax(0, 1fr); }
}