.product-grid .product {
  position: relative;
  height: auto;
  aspect-ratio: 947 / 575;
  overflow: hidden;
  border-radius: 24px;
  background: #f4f5f6;
}

.product-grid .product > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.product-copy {
  display: none;
}

.card-hotspot {
  position: absolute;
  z-index: 2;
  top: 22%;
  height: 9%;
  border-radius: 999px;
  background: transparent;
}

.card-hotspot.primary {
  left: 38.5%;
  width: 14.5%;
}

.card-hotspot.secondary {
  left: 53.5%;
  width: 8.5%;
}

.card-hotspot.single {
  left: 43.5%;
  width: 13%;
}

.card-hotspot:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.why.carousel {
  position: relative;
  height: auto;
  aspect-ratio: 1903 / 613;
  overflow: hidden;
  background: #eceff2;
}

.why-track,
.why-slide {
  position: absolute;
  inset: 0;
}

.why-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.why-slide > div,
.why .dots {
  display: none;
}

.why .feature-control {
  top: 0;
  bottom: 0;
  width: 10%;
  height: 100%;
  margin: 0;
  border: 0;
  color: transparent;
  background: transparent;
  transform: none;
}

.why .feature-control.prev {
  left: 16%;
}

.why .feature-control.next {
  right: 16%;
}

@media (max-width: 720px) {
  .product-grid .product {
    border-radius: 18px;
  }

  .why.carousel {
    height: 390px;
    aspect-ratio: auto;
  }

  .why-slide > img {
    left: 50%;
    width: auto;
    min-width: 100%;
    transform: translateX(-50%);
  }

  .why .feature-control.prev {
    left: 2%;
  }

  .why .feature-control.next {
    right: 2%;
  }
}