@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .story { grid-template-columns: 1fr; }
  .story img { width: 100%; height: 220px; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .hamburger { display: inline-grid; place-items: center; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { min-height: 86vh; }
  .hero p { font-size: 1rem; }
  .page-hero { padding-top: 96px; }
}

@media (max-width: 560px) {
  .section { padding: 66px 0; }
  .container { width: min(1200px, calc(100% - 24px)); }
  .card { padding: 18px; }
  .counter-number { font-size: 1.7rem; }
  .floating-donate { right: 14px; bottom: 80px; padding: 10px 14px; font-size: 14px; }
  .floating-wa { right: 14px; width: 48px; height: 48px; }
}