@layer layout {
  body.canvas-page #center #main,
  body.path-canvas #center #main {
    width: 100%;
    margin: 0;
  }
  .container {
    padding: 0 1.875rem;
  }
  @media (max-width: 849px) {
    #center {
      padding: 1.875rem 0;
    }
    #center .region-center {
      display: flex;
      flex-direction: column;
    }
    #center .region-center #main {
      order: 1;
    }
    #center .region-center #sidebar-first {
      order: 2;
    }
    #center .region-center #sidebar-second {
      order: 3;
    }
  }
  @media (min-width: 850px) {
    #center {
      overflow: hidden;
      padding: 6.25rem 0;
    }
    #center.sidebar-first .region-center {
      display: grid;
      grid-template-columns: 13.75rem 1fr;
      gap: 5rem;
    }
    #center.sidebar-second .region-center {
      display: grid;
      grid-template-columns: 1fr 20rem;
      gap: 5rem;
    }
    #center.two-sidebars .region-center {
      display: grid;
      grid-template-columns: 13.75rem 1fr 13.75rem;
      gap: 5rem;
    }
    #center.no-sidebars #main {
      width: 52.5rem;
      margin: 0 auto;
    }
  }
  @media (min-width: 850px) {
    .container {
      padding: 0 3.125rem;
    }
  }
  @media (min-width: 1360px) {
    .container {
      width: 59%;
      min-width: 71.25rem;
      margin: 0 auto;
      padding: 0;
    }
  }
  @media (max-width: 849px) {
    #navbar-collapse {
      display: none;
    }
    #navbar-collapse .container {
      padding: 0 3.125rem;
    }
    body.menu-open {
      overflow: hidden;
    }
    body.menu-open #navbar-collapse {
      position: fixed;
      z-index: 1000;
      top: 5.625rem;
      left: 0;
      display: flex;
      overflow-y: auto;
      flex-direction: column;
      width: 100%;
      height: calc(100% - 5.625rem);
      padding-top: 3.125rem;
      color: var(--white);
      background: var(--primary);
    }
    body.menu-open #navbar-collapse #header {
      order: 2;
    }
    body.menu-open #navbar-collapse #menu {
      order: 1;
    }
  }
}