.hero-grid {
  display: grid;
  width: 100%;

  /* grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(10, auto); */

}
.hero-grid > * {
  grid-area: 1 / 1;
}
.hero-grid > .hero__inner {
  position: relative;
  place-self: center left;
}
.hero__badge {
  position: absolute;
  top: -13%;
  left: 69%;
  width: clamp(15.625rem, 15rem + 3.13vw, 18.75rem);
  height: clamp(15.625rem, 15rem + 3.13vw, 18.75rem);
}

.hero__img {
  width: 100%;
  /* aspect-ratio: 3 / 2; */
}

.hero__inner {
  display: flex;
  left: 10%;
  top: -15%;
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "hero__kicker"
    "hero__title"
    "hero__lead";
  width: 100%;
  align-items: center;
  color: var(--color--text);
  gap: var(--space--4);
}

.hero__kicker {
  grid-area: hero__kicker;
  font-size: var(--font-size--2xl);
  font-weight: 600;
}

.hero__title {
  grid-area: hero__title;
  font-size: var(--font-size--4xl);
}
.hero__title .hero__title-line--accent {
  background: var(--gradation-color--text);
  background-clip: text;
  color: transparent;
}

.hero__lead {
  grid-area: hero__lead;
  font-size: var(--font-size--xl);
}
.hero__lead .hero__lead-line span {
  color: var(--color--text-accent);
  font-weight: 600;
}

@media (width <= 1024px) {
  .hero__inner {
    left: 5%;
  }
  .hero__kicker {
    font-size: var(--font-size--xl);
  }
  .hero__title {
    font-size: var(--font-size--3xl);
  }
  .hero__lead {
    font-size: var(--font-size--lg);
  }

  .hero__badge {
    top: -15%;
    left: 65%;
    width: clamp(12.5rem, 11.875rem + 3.13vw, 15.625rem);
    height: clamp(12.5rem, 11.875rem + 3.13vw, 15.625rem);
  }

}

@media (width <= 768px) {
  .hero__badge {
      top: -17%;
      left: 67%;
      width: clamp(9.375rem, 8.036rem + 6.7vw, 11.25rem);
      height: clamp(9.375rem, 8.036rem + 6.7vw, 11.25rem);
    }

  .hero__inner {
    top: -8%;
  }

  .hero__kicker {
    font-size: var(--font-size--lg);
  }

  .hero__title {
    font-size: var(--font-size--2xl);
  }

  .hero__lead {
    font-size: var(--font-size--md);
  }

}

@media (width <= 620px) {
  .hero__badge {
    top: -8%;
    left: 75%;
    width: clamp(6.25rem, 4.018rem + 11.16vw, 9.375rem);
    height: clamp(6.25rem, 4.018rem + 11.16vw, 9.375rem);
  }

  .hero__inner {
    top: -8%;
  }

  .hero__kicker {
    font-size: var(--font-size--md);
  }

  .hero__title {
    font-size: var(--font-size--xl);
  }

  .hero__lead {
    font-size: var(--font-size--sm);
  }

}

@media (width <= 450px) {
  .hero__badge {
    top: -10%;
    left: 65%;
  }

  .hero__kicker {
    font-size: var(--font-size--sm);
  }

  .hero__title {
    font-size: var(--font-size--lg);
  }

  .hero__lead {
    font-size: var(--font-size--xs);
  }

}