@media (min-width: 761px) {
  .hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    padding-top: clamp(3.25rem, 6vw, 5.75rem);
    padding-bottom: clamp(3.25rem, 6vw, 5.75rem);
  }

  .hero h1 {
    font-size: clamp(3rem, 3.5vw, 4rem);
    line-height: 1.03;
    max-width: 920px;
  }
}

@media (min-width: 761px) and (max-height: 820px) {
  .hero {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 3.1vw, 3.55rem);
  }

  .hero-text {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
  }

  .hero-card {
    padding: 1.45rem;
  }
}