.gallery {
  position: fixed; inset: 0;
  z-index: var(--z-lift);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: color-mix(in srgb, var(--ink-on-light) 97%, transparent);
  color: var(--ink-on-dark);
  --pop-origin: center;
}
.gallery-top {
  display: flex; align-items: center; gap: var(--sp-150);
  padding: var(--sp-150) var(--sp-200);
}
.gallery-head { flex: 1; min-width: 0; }
.gallery-who { font-weight: var(--fw-semi); }
.gallery-when { font-size: var(--fs-s); line-height: var(--lh-s); opacity: .7; }
.gallery-acts { display: flex; gap: var(--sp-050); }
.gallery .icon-btn { color: var(--ink-on-dark); }
@media (hover: hover) {
  .gallery .icon-btn:hover { background: color-mix(in srgb, var(--ink-on-dark) 14%, transparent); }
}
.gallery-stage {
  display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--sp-600) var(--sp-300);
  touch-action: pan-y;
}
.gallery-media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-s);
  user-select: none;
}
.gallery-nav {
  position: absolute; top: 50%;
  width: var(--sp-600); height: var(--sp-600);
  margin-top: calc(var(--sp-600) / -2);
  border-radius: var(--r-full);
  justify-content: center;
}
.gallery-nav.prev { left: var(--sp-150); }
.gallery-nav.next { right: var(--sp-150); }
.gallery-count {
  justify-self: center;
  padding: var(--sp-150);
  font-size: var(--fs-s);
  opacity: .7;
}
.gallery-count:empty { display: none; }
html[data-mob] .gallery-stage { padding: 0; }
html[data-mob] .gallery-nav { display: none; }