.hero-products-visual {
  position: relative;
  isolation: isolate;
  min-height: 440px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #f4f8f5 58%, #e2f0e8 100%);
  box-shadow: 0 24px 60px #0007;
}

.hero-products-visual::before {
  content: "";
  position: absolute;
  inset: auto -12% -34% 20%;
  height: 70%;
  border-radius: 50%;
  background: #bfe4d066;
  filter: blur(18px);
  z-index: -1;
}

.hero-product { position: absolute; display: grid; place-items: center; }
.hero-product img { width: 100%; height: 100%; object-fit: contain; }
.hero-towel { inset: 3% 30% 3% 0; }
.hero-towel-only .hero-towel { inset: 2%; }
.hero-towel-only .hero-towel img { object-position: center; }
.hero-belt {
  width: 47%; height: 48%; right: 2%; bottom: 3%;
  transform: rotate(-5deg);
  filter: drop-shadow(0 18px 22px #10261d28);
}
.hero-product-label {
  position: absolute; z-index: 2; padding: 8px 13px;
  border-radius: 999px; background: #08251be8; color: #fff;
  font-size: 12px; font-weight: 800; box-shadow: 0 8px 24px #0003;
}
.label-towel { top: 18px; left: 18px; }
.label-belt { right: 18px; bottom: 18px; }

@media (max-width: 950px) {
  .hero-products-visual { min-height: 410px; }
}

@media (max-width: 760px) {
  .hero-products-visual { min-height: 330px; border-radius: 16px; }
  .hero-towel { inset: 2% 23% 2% -8%; }
  .hero-towel-only .hero-towel { inset: 2%; }
  .hero-belt { width: 48%; height: 43%; right: 1%; bottom: 4%; }
  .hero-product-label { font-size: 10px; padding: 7px 10px; }
  .label-towel { top: 12px; left: 12px; }
  .label-belt { right: 12px; bottom: 12px; }
}