@media (max-width: 900px) {
  .site-shell {
    max-width: 100%;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }

  .layout,
  .intro-box,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .quick-status {
    border-left: 0;
    border-top: 1px solid #9db1c8;
  }

  .sidebar {
    order: 2;
  }

  .main-content {
    order: 1;
  }

  .grid-4,
  .grid-3,
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .flow-step::after {
    content: "";
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 13px;
  }

  .utility-bar,
  .utility-controls,
  .header-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-banner {
    display: flex;
    background:
      linear-gradient(90deg, rgba(255,255,255,.46), rgba(255,255,255,0) 55%),
      linear-gradient(#dcecff, #4c83bd 50%, #1c5597);
  }

  .brand img {
    width: 205px;
  }

  .nav-toggle {
    display: block;
  }

  .main-nav {
    display: block;
  }

  .main-nav a {
    display: none;
    border-top: 1px solid rgba(255,255,255,.16);
    border-left: 0;
    border-right: 0;
  }

  .main-nav.open a {
    display: flex;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .gallery {
    grid-template-columns: 1fr;
  }

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

  .milestone-head {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .table-like-list div,
  .shortcut-row {
    grid-template-columns: 1fr;
  }

  .two-column-list {
    columns: 1;
  }
}

@media (max-width: 480px) {
  .site-shell {
    box-shadow: none;
  }

  .layout {
    padding: 7px;
  }

  .intro-copy {
    padding: 9px;
  }

  h1 {
    font-size: 19px;
  }

  .classic-button,
  button.classic-button {
    width: 100%;
  }

  .mini-content {
    grid-template-columns: 1fr;
  }

  .mini-tree {
    border-right: 0;
    border-bottom: 1px solid #b8c6d6;
    padding-bottom: 5px;
  }
}