.hero{ padding:64px 0 32px; }
.hero h1{ font-size:clamp(28px,4.5vw,48px); line-height:1.15; margin:0 0 12px; }

.grid{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
.card{
  grid-column:span 12; background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:18px; box-shadow:var(--shadow);
}
.card h3{ margin:0 0 6px; font-size:18px; }
.card p, .card ul, .card li { color: var(--muted); }
.card > :last-child {
  margin-bottom: 0;
}

/* on larger screens, each card spans 6 columns (~300px considering layout) */
@media(min-width:980px){ .card{ grid-column:span 6; } }

@media(max-width:768px){
  .hero{ padding:32px 0 32px; }
}