.article-gallery-zoom-controls {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(2, 15, 29, .82);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
}

.article-gallery-zoom-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  font: 700 1.25rem/1 Arial, sans-serif;
  cursor: pointer;
}

.article-gallery-zoom-controls button:last-child {
  border-right: 0;
}

.article-gallery-zoom-controls button:hover,
.article-gallery-zoom-controls button:focus-visible {
  background: rgba(255, 255, 255, .16);
}

.article-gallery-zoom-controls button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid #ffd633;
  outline-offset: -3px;
}

.article-gallery-zoom-controls button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.article-gallery-zoom-controls .article-gallery-zoom-reset {
  min-width: 68px;
  font-size: .82rem;
}

.article-gallery-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  touch-action: pan-y;
}

.article-gallery-viewport img {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition: transform .18s ease;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.article-gallery-lightbox.is-zoomed .article-gallery-viewport {
  touch-action: none;
}

.article-gallery-lightbox.is-zoomed .article-gallery-viewport img {
  cursor: grab;
}

.article-gallery-lightbox.is-dragging .article-gallery-viewport img {
  transition: none;
  cursor: grabbing;
}

@media (max-width: 640px) {
  .article-gallery-zoom-controls {
    left: max(10px, env(safe-area-inset-left));
    transform: none;
  }

  .article-gallery-zoom-controls button {
    min-width: 40px;
    min-height: 42px;
    padding-inline: 9px;
  }

  .article-gallery-zoom-controls .article-gallery-zoom-reset {
    min-width: 58px;
  }
}