@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .section {
    padding-block: var(--space-48);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-header,
  .mobile-menu {
    display: block;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 2 * var(--space-12), var(--container-width));
  }
}