.hero-showcase.hero-has-products {
  width: min(100%, 680px);
  min-height: 430px;
  isolation: isolate;
}

.hero-showcase.hero-has-products::before {
  inset: 34px 4px 28px;
  width: min(92%, 560px);
  margin: 0 auto;
}

.hero-showcase.hero-has-products .hero-product-card {
  display: block;
  text-decoration: none;
  transform-origin: center;
}

.hero-showcase.hero-has-products .hero-card-1 {
  width: 224px;
  left: 28px;
  top: 24px;
  transform: rotate(-4deg);
  z-index: 2;
}

.hero-showcase.hero-has-products .hero-card-2 {
  width: 254px;
  right: 26px;
  top: 74px;
  z-index: 3;
}

.hero-showcase.hero-has-products .hero-card-3 {
  width: 214px;
  left: 132px;
  bottom: 36px;
  transform: rotate(3deg);
  z-index: 4;
}

.hero-showcase.hero-has-products .hero-card-1:hover {
  transform: rotate(-4deg) translateY(-6px);
}

.hero-showcase.hero-has-products .hero-card-2:hover {
  transform: translateY(-6px);
}

.hero-showcase.hero-has-products .hero-card-3:hover {
  transform: rotate(3deg) translateY(-6px);
}

.hero-showcase.hero-has-products .hero-product-image {
  background-position: center;
  background-size: cover;
}

.hero-showcase.hero-has-products.hero-product-count-1 .hero-card-1 {
  left: 50%;
  top: 40px;
  width: 248px;
  transform: translateX(-50%) rotate(-2deg);
}

.hero-showcase.hero-has-products.hero-product-count-1 .hero-card-1:hover {
  transform: translateX(-50%) rotate(-2deg) translateY(-6px);
}

.hero-showcase.hero-has-products.hero-product-count-2 .hero-card-1 {
  left: 88px;
  top: 38px;
}

.hero-showcase.hero-has-products.hero-product-count-2 .hero-card-2 {
  right: 82px;
  top: 112px;
}

.hero-showcase.hero-has-products .hero-note {
  bottom: -26px;
}

.hero-showcase.hero-has-products .hero-note span {
  clip: auto;
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .hero-showcase.hero-has-products {
    width: min(100%, 620px);
    min-height: 390px;
  }

  .hero-showcase.hero-has-products .hero-card-1 {
    left: 4%;
    top: 16px;
    width: 190px;
  }

  .hero-showcase.hero-has-products .hero-card-2 {
    right: 3%;
    top: 86px;
    width: 210px;
  }

  .hero-showcase.hero-has-products .hero-card-3 {
    left: 18%;
    bottom: 24px;
    width: 185px;
  }
}

@media (max-width: 768px) {
  .hero-showcase.hero-has-products {
    min-height: 380px;
    margin-bottom: 36px;
  }

  .hero-showcase.hero-has-products::before {
    inset: 32px 10px 28px;
  }
}

@media (max-width: 480px) {
  .hero-showcase.hero-has-products {
    min-height: 342px;
  }

  .hero-showcase.hero-has-products .hero-card-1 {
    width: 156px;
    left: 0;
    top: 20px;
  }

  .hero-showcase.hero-has-products .hero-card-2 {
    width: 176px;
    right: 0;
    top: 78px;
  }

  .hero-showcase.hero-has-products .hero-card-3 {
    width: 152px;
    left: 12%;
    bottom: 38px;
  }

  .hero-showcase.hero-has-products.hero-product-count-1 .hero-card-1 {
    width: 188px;
    left: 50%;
    top: 36px;
  }

  .hero-showcase.hero-has-products.hero-product-count-2 .hero-card-1 {
    left: 3%;
  }

  .hero-showcase.hero-has-products.hero-product-count-2 .hero-card-2 {
    right: 3%;
    top: 112px;
  }
}