@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.8rem 0;
    display: none;
  }

  .site-nav.is-open {
    display: flex;
  }

  .panel {
    padding: 1.8rem;
  }

  .home {
    max-width: 100%;
  }

  .home-section {
    padding: 2.6rem 0;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .home-hero__image {
    height: 45vh;
  }

  .home-invite {
    text-align: left;
    margin: 0;
  }

  .trace-grid {
    grid-template-columns: 1fr;
  }

  .home-puppy__image {
    height: 260px;
  }

  .home-outlook {
    text-align: left;
    margin: 0;
  }

  .about-text {
    max-width: 100%;
  }

  .about-lead {
    font-size: 1.35rem;
  }

  .diary-controls {
    align-items: flex-start;
  }

  .diary-grid {
    grid-template-columns: 1fr;
  }

  .diary-modal__content {
    max-height: 92vh;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "media"
      "body"
      "nav";
  }

  .diary-modal__media {
    border-right: none;
  }

  .diary-modal__image {
    height: min(52vh, 520px);
  }

  .diary-modal__body,
  .diary-modal__nav {
    padding: 0 1.4rem;
  }


  .puppy-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }

  .puppy-card--key {
    grid-column: span 1;
    grid-row: span 1;
  }

  .puppy-modal__content {
    max-height: 92vh;
  }

  .panel--home {
    grid-template-columns: 1fr;
  }

  .panel--home .hero {
    height: 40vh;
    min-height: 280px;
  }

  .media-grid {
    grid-template-columns: 1fr;
  }

  .hero-card__caption {
    position: static;
    max-width: 100%;
  }

  .site-footer {
    margin-top: auto;
    flex-direction: column;
    gap: 0.5rem;
  }
}