.hero{ padding: 3.5rem 0; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:2rem;
  align-items:center;
}
.hero-title{ font-size: clamp(2rem, 3vw, 3rem); margin:.25rem 0; }
.hero-subtitle{ color:var(--muted); max-width:60ch; }

.hero-actions{ display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .nav-list{ flex-wrap:wrap; }
}
``