.promo-slider {
  min-width: 0;
  overflow: hidden;
  position: relative;
  touch-action: auto;
}

.promo-track {
  display: flex;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform .58s cubic-bezier(.22, .8, .25, 1);
  width: 100%;
}

.promo-track.is-moving { will-change: transform; }

.promo-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  min-width: 0;
  position: relative;
}

.promo-slide > img { height: 100%; width: 100%; }

.promo-arrow {
  align-items: center;
  background: rgba(255,255,255,.94);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  color: var(--green);
  cursor: pointer;
  display: flex;
  font: 500 2rem/1 sans-serif;
  height: 46px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  z-index: 6;
}

.promo-arrow.prev { left: 16px; }
.promo-arrow.next { right: 16px; }

.promo-dots {
  bottom: 12px;
  display: flex;
  gap: 8px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 6;
}

.promo-dots button {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--green);
  border-radius: 50%;
  cursor: pointer;
  height: 11px;
  padding: 0;
  width: 11px;
}

.promo-dots button.active { background: var(--gold); }

@media (max-width: 600px) {
  .promo-arrow { height: 40px; width: 40px; }
  .promo-arrow.prev { left: 8px; }
  .promo-arrow.next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-track { transition: none; }
}