@media (max-width: 820px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar nav {
    flex-wrap: wrap;
  }

  .brand-name {
    display: none;
  }

  .hero,
  .layout {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 34px;
  }

  .hero-panel {
    padding: 18px;
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 1.65rem;
  }

  .left-column {
    position: static;
  }

  .doc-section {
    padding: 20px;
  }
}