@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(560px, .95fr) minmax(560px, 1.05fr);
  }

  .hero-copy {
    min-width: 0;
    padding: 88px 60px 72px clamp(56px, 7vw, 100px);
  }

  .hero h1 {
    max-width: 570px;
    font-size: clamp(62px, 5vw, 82px);
  }

  .hero-text {
    max-width: 520px;
    margin: 28px 0;
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .hero-badges {
    margin-top: 42px;
    padding-top: 20px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
  }

  .hero-copy {
    padding: 70px 36px;
  }

  .hero h1 {
    font-size: 58px;
  }

  .button {
    min-width: 170px;
  }

  .hero-badges {
    gap: 14px;
    font-size: 12px;
  }
}