@media (max-width: 560px) {
  .hero { padding: 48px 16px 28px; }
  .nav { justify-content: flex-start; }
  .tl li { grid-template-columns: 60px 1fr; gap: 4px; padding-left: 10px; }
  .hero-img { aspect-ratio: 4 / 3; }
  .grid, .notes { grid-template-columns: 1fr; }
  .day { padding-top: 32px; }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}