.ad-gallery {
  width: 100%;
  margin: 22px 0 28px;
  color: #fff;
}

.ad-gallery__stage {
  position: relative;
  height: clamp(340px, 48vw, 610px);
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .12), transparent 42%),
    #17191d;
  box-shadow: 0 14px 38px rgba(24, 32, 44, .18);
  isolation: isolate;
  touch-action: pan-y;
}

.ad-gallery__slides,
.ad-gallery__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ad-gallery__slide {
  display: block;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  cursor: zoom-in;
  transition: opacity .32s ease, visibility .32s ease;
}

.ad-gallery__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.ad-gallery__slide:focus-visible {
  box-shadow: inset 0 0 0 3px #ff4c4c;
}

.ad-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 14px;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.ad-gallery__zoom {
  position: absolute;
  right: 18px;
  bottom: 17px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, .68);
  font: 600 12px/1.2 "Open Sans", sans-serif;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .2s ease, transform .2s ease;
}

.ad-gallery__slide:hover .ad-gallery__zoom,
.ad-gallery__slide:focus-visible .ad-gallery__zoom {
  opacity: 1;
  transform: translateY(0);
}

.ad-gallery__arrow,
.ad-lightbox__arrow,
.ad-lightbox__close {
  display: grid;
  place-items: center;
  border: 0;
  color: #fff;
  background: rgba(0, 0, 0, .58);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.ad-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  font-size: 30px;
  opacity: .88;
}

.ad-gallery__arrow--prev { left: 16px; }
.ad-gallery__arrow--next { right: 16px; }

.ad-gallery__arrow:hover,
.ad-gallery__arrow:focus-visible,
.ad-lightbox__arrow:hover,
.ad-lightbox__arrow:focus-visible,
.ad-lightbox__close:hover,
.ad-lightbox__close:focus-visible {
  background: #ff4c4c;
  transform: scale(1.06);
  outline: none;
}

.ad-gallery__counter {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  min-width: 54px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .65);
  text-align: center;
  font: 600 12px/1 "Open Sans", sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
}

.ad-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 3px 2px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #ff4c4c #eceff3;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.ad-gallery__thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 68px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #fff;
  opacity: .68;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .2s ease, opacity .2s ease, transform .2s ease;
}

.ad-gallery__thumb:hover,
.ad-gallery__thumb:focus-visible,
.ad-gallery__thumb.is-active {
  border-color: #ff4c4c;
  opacity: 1;
  outline: 0;
  transform: translateY(-2px);
}

.ad-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.ad-gallery__hint {
  display: none;
  margin-top: 6px;
  color: #7a828d;
  text-align: center;
  font-size: 11px;
}

.ad-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 70px;
  background: rgba(5, 7, 10, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.ad-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.ad-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 108px);
  object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45));
  transform: scale(.985);
  transition: transform .22s ease;
}

.ad-lightbox.is-open .ad-lightbox__image { transform: scale(1); }

.ad-lightbox__close,
.ad-lightbox__arrow {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 27px;
}

.ad-lightbox__close { top: 18px; right: 20px; }
.ad-lightbox__arrow { top: 50%; margin-top: -24px; }
.ad-lightbox__arrow--prev { left: 18px; }
.ad-lightbox__arrow--next { right: 18px; }

.ad-lightbox__caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 12px;
  transform: translateX(-50%);
}

body.ad-lightbox-open { overflow: hidden; }

@media (max-width: 991px) {
  .ad-gallery__stage { height: clamp(320px, 66vw, 560px); }
  .ad-gallery__hint { display: block; }
}

@media (max-width: 600px) {
  .ad-gallery { margin: 16px 0 22px; }
  .ad-gallery__stage {
    height: clamp(260px, 78vw, 430px);
    border-radius: 11px;
  }
  .ad-gallery__slide img { padding: 8px; }
  .ad-gallery__arrow {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 26px;
  }
  .ad-gallery__arrow--prev { left: 9px; }
  .ad-gallery__arrow--next { right: 9px; }
  .ad-gallery__zoom { display: none; }
  .ad-gallery__counter { top: 10px; right: 10px; }
  .ad-gallery__thumb {
    flex-basis: 72px;
    width: 72px;
    height: 56px;
  }
  .ad-lightbox { padding: 58px 12px; }
  .ad-lightbox__arrow {
    top: auto;
    bottom: 17px;
    width: 42px;
    height: 42px;
    margin: 0;
  }
  .ad-lightbox__arrow--prev { left: 18px; }
  .ad-lightbox__arrow--next { right: 18px; }
  .ad-lightbox__caption { bottom: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-gallery__slide,
  .ad-gallery__thumb,
  .ad-gallery__arrow,
  .ad-lightbox,
  .ad-lightbox__image { transition: none; }
}