#top > .hero .hero-gallery-photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#top > .hero .hero-gallery-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top > .hero .hero-gallery-controls {
  position: absolute;
  z-index: 5;
  top: clamp(16px, 6%, 48px);
  right: max(calc(6% + 16px), 7%);
  display: flex;
  align-items: center;
  gap: 3px;
  color: #f3eadacc;
  font: 11px "Courier New", monospace;
}
#top > .hero .hero-gallery-controls[hidden] { display: none; }
#top > .hero .hero-gallery-controls button {
  background: #09121bb3;
  color: inherit;
  border: 1px solid #8ebbd58a;
  min-width: 30px;
  min-height: 30px;
  cursor: pointer;
}
#top > .hero .hero-gallery-controls button:is(:hover,:focus-visible) { border-color: #ed9cdb; }
#top > .hero .hero-gallery-controls button:disabled { opacity: .45; }
#top > .hero .hero-gallery-controls output { padding-inline: 5px; white-space: nowrap; }