@media (max-width: 480px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

@media (min-width: 768px) {
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }
}