@media only screen and (max-width: 1100px) {
  :root {
    --max-width: 800px;
    --padding: 40px;
  }

  h1 {
    font-size: calc(8px * 14);
  }

  /* .menu-bar {
    display: none;
  }
  .menu-bar.menu-mobile {
    display: flex;
  } */

  .site-header {
    max-width: var(--max-width);
    left: 50%;
    transform: translateX(-50%);
    padding: 0 var(--padding);
  }

  .menu-bar {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    /* width: calc(var(--max-width) - var(--padding) * 2); */
    padding: 0;
    border-bottom: 1px solid var(--color-white);

    & li {
      margin: 0.3em 0;
    }

    .site-branding {
      grid-column: 1 / span 2;
      /* border-top: 1px solid var(--color-white); */
      border-bottom: 1px solid var(--color-white);
    }

    .menu-left-menu-container {
      grid-column: 1;
      grid-row: 2;
      margin-top: 0;
    }
    .menu-right-menu-container {
      grid-column: 2;
      grid-row: 2;
      margin-top: 0;
    }
  }

  .single-column {
    max-width: var(--max-width);
  }

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

  .filled-section {
    padding-left: 0;
    padding-right: 0;
  }

  .home .top {
    padding: 340px 50px 220px 50px;

    & img.meadville-svg {
      margin-top: -4em;
      width: 100%;
      max-width: 70vw;
      z-index: -1;
    }
  }

  .top {
    padding: calc(var(--padding) * 7) 0px calc(var(--padding) * 1) 0px;
  }
}