@media (max-width: 940px) {
  :root {
    --go-page-gutter: 24px;
    --go-page-start: 38px;
    --go-card-padding: 18px;
  }

  .nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px 0;
  }

  .nav-links {
    flex-wrap: wrap;
  }

  .nav-user {
    width: 100%;
  }

  .nav-user-menu {
    right: auto;
    left: 0;
  }

  .metrics-grid,
  .summary-columns,
  .pipeline-stats,
  .pipeline-rail,
  .pipeline-assets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-head,
  .pipeline-bottom {
    grid-template-columns: 1fr;
  }

  .pipeline-orb {
    width: 92px;
  }
}

@media (max-width: 560px) {
  :root {
    --go-page-gutter: 16px;
    --go-page-start: 30px;
    --go-page-end: 42px;
    --go-card-padding: 16px;
  }

  .hero h1 {
    font-size: 40px;
  }

  .metrics-grid,
  .summary-columns,
  .pipeline-stats,
  .pipeline-rail,
  .pipeline-assets {
    grid-template-columns: 1fr;
  }

  .pipeline-view {
    padding: 18px;
  }

  .nav-user-trigger {
    max-width: 100%;
  }

  .nav-user-name {
    max-width: 190px;
  }
}

@media (min-width: 641px) and (max-width: 699px), (min-width: 700px) and (orientation: portrait) {
  :root {
    --go-page-gutter: 12px;
    --go-page-start: 24px;
    --go-card-padding: 18px;
  }
}