.hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  /*padding-block: 0 clamp(1.25rem, -0.1rem + 6.75vw, 8rem);*/
  text-align: center;
}

.hero__media {
  position: relative;
  padding: 30px;
}

.hero__media_star-left,
.hero__media_star-right,
.hero__media_star-bottom {
  position: absolute;
}

.hero__media-img {
  width: clamp(13.125rem, 7.625rem + 27.5vw, 40.625rem);
  height: clamp(11.875rem, 6.875rem + 25vw, 38.125rem);
  margin: 0 auto;
  animation: hero-media-w-float 8.6s ease-in-out infinite;
  will-change: transform;
}

.hero__media_star-left {
  width: clamp(3rem, 2.375rem + 3.125vw, 5.75rem);
  height: clamp(3rem, 2.375rem + 3.125vw, 5.75rem);
  top: 35%;
  left: 0%;
}

.hero__media_star-right {
  width: clamp(4.25rem, 3.5rem + 3.75vw, 8rem);
  height: clamp(4.25rem, 3.5rem + 3.75vw, 8rem);
  top: -4%;
  right: -5%;
}

.hero__media_star-bottom {
  width: clamp(2rem, 1.65rem + 1.75vw, 3.75rem);
  height: clamp(2rem, 1.65rem + 1.75vw, 3.75rem);
  bottom: 14%;
  left: 82%;
}

.hero__content {
  padding-block: clamp(2rem, 1.775rem + 1.125vw, 3.125rem)
    clamp(5rem, 3.125rem + 9.375vw, 9.375rem);
  max-width: none;
  margin-inline: auto;
}

.hero__text {
  margin-top: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-family: var(--font-body-regular);
  font-size: clamp(1.375rem, 1.2125rem + 0.8125vw, 2.1875rem);
  line-height: clamp(1.875rem, 1.625rem + 1.125vw, 3rem);
  max-width: 570px;
  margin-inline: auto;
}

.hero__catalog-link {
  margin-top: clamp(1.5rem, 1.225rem + 1.375vw, 2.875rem);
  font-size: clamp(1.5625rem, 1.5rem + 0.3125vw, 1.875rem);
  line-height: clamp(2.125rem, 2.0375rem + 0.4375vw, 2.5625rem);
}

/*
 * Pre-hide the hero text so the GSAP entrance (homeHeroTemplate.js) can
 * animate it in without a flash of fully-visible content on first paint.
 * Scoped to html.js so content stays visible immediately when JS is off.
 */
html.js .hero__content h1,
html.js .hero__content .hero__text,
html.js .hero__content .hero__catalog-link {
  opacity: 0;
}

.hero__catalog-link img {
  width: clamp(2.3125rem, 2.2rem + 0.5625vw, 2.875rem);
  height: clamp(0.9375rem, 0.8875rem + 0.25vw, 1.1875rem);
}

@media (min-width: 961px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }

  .hero__content {
    max-width: 620px;
  }
  .hero__media_star-left {
    top: 50%;
    left: 10%;
  }

  .hero__media_star-right {
    top: 53%;
    right: -3%;
  }

  .hero__media_star-bottom {
    bottom: -5%;
    left: 28%;
  }
}

@keyframes hero-media-w-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  15% {
    transform: translate3d(-10px, -8px, 0) rotate(3deg);
  }
  30% {
    transform: translate3d(-5px, 8px, 0) rotate(6deg);
  }
  45% {
    transform: translate3d(0, -6px, 0) rotate(10deg);
  }
  60% {
    transform: translate3d(5px, 8px, 0) rotate(15deg);
  }
  75% {
    transform: translate3d(10px, -8px, 0) rotate(7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media-img {
    animation: none !important;
    transform: none !important;
  }
}