@media (max-width: 768px) {
  .page {
    padding: 40px 16px 28px;
  }
  .albums {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 420px;
  }
  .nav-links {
    margin-bottom: 36px;
    gap: 20px;
  }
  .modal {
    padding: 36px 24px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  .page {
    padding: 32px 12px 24px;
  }
  .nav-links {
    gap: 16px;
    margin-bottom: 28px;
  }
  .nav-links a,
  .nav-links button {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
  }
  .albums {
    gap: 14px;
  }
  .modal {
    padding: 28px 16px;
    width: 94%;
  }
  .modal-photo img {
    width: 140px;
    height: 140px;
  }
  .modal-quote {
    font-size: 0.75rem;
  }
  .modal-text {
    font-size: 0.72rem;
  }
  .modal-signature img {
    height: 40px;
  }
  .album-card .label {
    font-size: 0.65rem;
    padding: 7px 18px;
    letter-spacing: 0.24em;
  }
}