.product-carousel {
  --bg: #020204;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, .62);
  --slide-w: clamp(320px, 32vw, 660px);
  --slide-h: clamp(230px, 22vw, 450px);
  --side-step: 36vw;
  --arrow-gap: clamp(4px, .35vw, 10px);
  position: relative;
  width: 100%;
  min-height: clamp(420px, 33vw, 680px);
  overflow: hidden;
  background: var(--bg);
}

.product-carousel *,
.product-carousel *::before,
.product-carousel *::after {
  box-sizing: border-box;
}

.product-carousel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.product-carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--slide-w);
  height: var(--slide-h);
  transform: translate(-50%, -50%);
  transition: transform .56s cubic-bezier(.2, .78, .2, 1), opacity .56s ease;
  opacity: .72;
  will-change: transform, opacity;
}

.product-carousel__slide a {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--white);
}

.product-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-carousel__slide.is-active {
  opacity: 1;
  z-index: 2;
}

.product-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, transform .2s ease;
}

.product-carousel__nav:hover {
  color: var(--white);
  transform: translateY(-50%) scale(1.08);
}

.product-carousel__nav span {
  font-size: 42px;
  line-height: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
}

.product-carousel__nav--prev {
  left: calc(50% - var(--slide-w) / 2 - var(--arrow-gap) - 52px);
}

.product-carousel__nav--next {
  right: calc(50% - var(--slide-w) / 2 - var(--arrow-gap) - 52px);
}

@media (max-width: 768px) {
  .product-carousel {
    --slide-w: min(78vw, 520px);
    --slide-h: min(54vw, 360px);
    --side-step: 86vw;
    --arrow-gap: 6px;
    min-height: 360px;
  }

  .product-carousel__nav {
    width: 44px;
    height: 44px;
  }

  .product-carousel__nav span {
    font-size: 32px;
  }

  .product-carousel__nav--prev {
    left: 14px;
  }

  .product-carousel__nav--next {
    right: 14px;
  }
}