.hero-copy p {
  color: #ffefd1;
}

:root {
  --accent: #ffefd1;
}

.video-stage.playing:hover .play-button {
  opacity: 0;
  pointer-events: none;
}

.pause-button {
  position: absolute;
  z-index: 3;
  bottom: 18px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding: 7px 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.pause-button[hidden] {
  display: none;
}

.pause-button span {
  width: 10px;
  height: 12px;
  border-right: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.pause-button b {
  font-size: 9px;
  font-weight: 500;
}

.carousel {
  position: relative;
}

.carousel > .gallery-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 54px;
  height: 54px;
  border-color: rgba(255, 255, 255, .58);
  background: rgba(7, 8, 8, .48);
  font-size: 24px;
  transform: translateY(-50%);
}

.carousel > .gallery-arrow.prev {
  left: clamp(14px, 3vw, 44px);
}

.carousel > .gallery-arrow.next {
  right: clamp(14px, 3vw, 44px);
}

.carousel > .gallery-arrow:hover {
  transform: translateY(-50%) scale(1.06);
}

@media (max-width: 700px) {
  .carousel > .gallery-arrow {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .carousel > .gallery-arrow.prev {
    left: 10px;
  }

  .carousel > .gallery-arrow.next {
    right: 10px;
  }
}