@media (max-width: 920px) {
  .four-card-grid,
  .listing-grid,
  .filter-bar,
  .about-band {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .site-header,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav {
    gap: 10px 14px;
  }

  .hero {
    min-height: 72vh;
    padding-top: 62px;
  }

  .four-card-grid,
  .listing-grid,
  .filter-bar,
  .about-band,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: 140px;
  }
}