@media (max-width: 1100px)  {
  :root  {
    --header-height: 90px;
  }

  .site-header  {
    min-height: 90px;
  }

  .site-name span  {
    display: none;
  }

  #main-navigation  {
    width: 100%;
    flex-wrap: wrap;
  }

  .nav-enhanced #main-navigation  {
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }

  .nav-enhanced #main-navigation > .site-nav > li > a  {
    display: block;
    padding: 12px 0;
  }

  .nav-enhanced .dropdown-links  {
    position: static;
    width: 100%;
  }

  .dropdown-toggle  {
    padding: 12px 0;
  }

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

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

}

@media (max-width: 700px)  {
  .site-name  {
    display: none;
  }

  .hero h1  {
    margin-block: 45px;
    font-size: 19vw;
  }

  .hero-meta  {
    font-size: .65rem;
  }

  .hero-bottom, .section-heading, .split, .manifesto .container  {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-bottom .actions  {
    justify-content: flex-start;
  }

  .cards, .starter-grid  {
    grid-template-columns: 1fr;
  }

  .playground-controls  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px;
  }

  .playground-stage  {
    padding: 20px;
  }

  .site-footer  {
    grid-template-columns: 1fr;
  }

  .download-row  {
    grid-template-columns: 1fr;
  }

  .preview-frame  {
    height: 240px;
  }

  .section-heading  {
    margin-bottom: 28px;
  }

}

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

  .nav-enhanced .site-nav {
    display: block;
  }
}