.scroll-gallery img,
.about-image img { cursor: zoom-in; }

.image-viewer {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 60px 64px;
  border: 0;
  background: rgba(3, 3, 3, 0.98);
  color: #f4f3f0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.image-viewer[open] { display: grid; place-items: center; }
.image-viewer::backdrop { background: rgba(0, 0, 0, 0.95); }
.image-viewer-stage { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; margin: 0; }
.image-viewer-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; user-select: none; }
.image-viewer button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: 300 36px/1 sans-serif;
}
.image-viewer button[hidden] { display: none; }
.image-viewer button:hover { color: #fff; }
.image-viewer-close { top: max(12px, env(safe-area-inset-top, 0px)); left: 14px; font-size: 25px !important; }
.image-viewer-prev { top: calc(50% - 22px); left: 10px; }
.image-viewer-next { top: calc(50% - 22px); right: 10px; }
.image-viewer-count {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  margin: 0;
  color: rgba(244, 243, 240, 0.65);
  text-align: center;
  font: 12px/1.5 sans-serif;
  letter-spacing: 0.12em;
  pointer-events: none;
}
@media (max-width: 720px) {
  .image-viewer { padding: 58px 12px; }
  .image-viewer-prev, .image-viewer-next { background: rgba(0, 0, 0, 0.25); }
  .image-viewer-prev { left: 0; }
  .image-viewer-next { right: 0; }
}