@media (min-width: 1001px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(410px, .85fr);
    gap: clamp(30px, 4vw, 72px);
    max-width: 1520px;
  }

  .hero-title > span {
    display: block;
    white-space: nowrap;
  }
}

@media (max-width: 1000px) {
  .hero-title > span { display: block; }
}

@media (max-width: 700px) {
  .hero-title > span { white-space: normal; }
}