@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }

  .three-columns {
    flex-direction: column;
  }

  .impact .stats {
    flex-direction: column;
    text-align: center;
  }
  .card {
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .two-columns {
    grid-template-columns: 1fr;
  }
}


/* Responsive columns */
@media (max-width: 1024px){
  .three-columns{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .three-columns{ grid-template-columns: 1fr; }
  .card{ padding: 18px; }
  .card h3{ font-size: 20px; }
}