.gallery-thumbs {
  position: absolute;
  z-index: 3;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 3px;
}

.gallery-thumbs button {
  flex: 0 0 72px;
  width: 72px;
  height: 56px;
  border: 1px solid #626b63;
  padding: 0;
  background: #111;
  cursor: pointer;
  opacity: .72;
}

.gallery-thumbs button.active {
  border-color: var(--acid);
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(211, 242, 75, .2);
}

.gallery-thumbs img { position: static; inset: auto; display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }

.gallery-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: rgba(13,15,14,.78);
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.gallery-arrow:hover,.gallery-arrow:focus-visible{background:var(--acid);border-color:var(--acid);color:#0b0d0c;outline:none}
.gallery-arrow:active{transform:translateY(-50%) scale(.94)}
.gallery-arrow-prev{left:20px}.gallery-arrow-next{right:20px}
.gallery-count{position:absolute;z-index:4;top:16px;right:16px;padding:6px 10px;border:1px solid rgba(255,255,255,.45);background:rgba(13,15,14,.72);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.08em;backdrop-filter:blur(8px)}

@media (max-width: 520px) {
  .gallery-thumbs { left: 12px; right: 12px; bottom: 12px; }
  .gallery-thumbs button { flex-basis: 58px; width: 58px; height: 46px; }
  .gallery-arrow{width:44px;height:44px;font-size:1.35rem}
  .gallery-arrow-prev{left:10px}.gallery-arrow-next{right:10px}
  .gallery-count{top:10px;right:10px}
}