@media (max-width: 600px) {
  .container {
    padding: 36px 12px 20px;
  }

  h1 {
    font-size: 1.45rem;
    letter-spacing: 0.1em;
  }

  .subtitle {
    font-size: 0.8rem;
  }

  .month-gallery {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
  }

  .item img,
  .item .video-thumb {
    height: 132px;
  }

  .search-wrapper {
    padding: 10px;
  }

  button#searchBtn {
    padding: 0 16px;
  }

  .nav-button {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .nav-prev { left: 8px; }
  .nav-next { right: 8px; }
}

@media (min-width: 720px) {
  .month-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .item img,
  .item .video-thumb {
    height: 160px;
  }
}