/* Grid-safe sizing for the sliding hero banner. */
.hero-slider {
  width: 100%;
  min-width: 0;
  display: block;
}

.hero-slider .swiper-wrapper {
  height: 100%;
}

.hero-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.hero-product {
  position: absolute;
  z-index: 1;
  top: 5%;
  right: 3%;
  width: 48%;
  height: 90%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero-product::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  filter: blur(1px);
}

.hero-product img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(18, 8, 45, .3));
  transform: rotate(-5deg);
}

.slide-two .hero-product img { transform: rotate(4deg) scale(.92); }
.slide-three .hero-product img { transform: rotate(-2deg) scale(.9); }

@media (max-width: 767.98px) {
  .hero-product { right: -8%; width: 55%; opacity: .7; }
  .hero-product::before { width: 180px; height: 180px; }
}

@media (max-width: 374.98px) {
  .hero-product { opacity: .45; }
}