@media (max-width: 1080px) {
  .hero,
  .section-head,
  .dashboard {
    grid-template-columns: 1fr;
  }

  .problem-grid,
  .score-grid,
  .layer-grid,
  .raw-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshot-grid,
  .timeline-grid,
  .sample-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layer-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .page,
  .footer {
    width: min(100vw - 28px, 1220px);
  }

  h1 {
    font-size: 48px;
  }

  .lead {
    font-size: 19px;
  }

  .metric-grid,
  .snapshot-grid,
  .problem-grid,
  .score-grid,
  .layer-grid,
  .timeline-grid,
  .sample-grid,
  .raw-gallery {
    grid-template-columns: 1fr;
  }

  .profile-body {
    padding: 0 20px 24px;
  }

  .nav {
    position: static;
  }

  .lightbox {
    padding: 12px;
  }

  .lightbox-dialog {
    grid-template-columns: 1fr;
  }

  .lightbox-media {
    min-height: 320px;
  }
}