@media (min-width: 1920px) {
  .container {
    max-width: var(--container-max);
  }
}

@media (max-width: 1024px) {
  .header-element-wrapper .mobile-nav {
    display: flex;
  }

  /*
   * Layout 1 pushes nav+actions right via `margin-left: auto` on the in-flow
   * nav (see layout-1.css). Below this width nav goes position: fixed and
   * drops out of the flex flow, leaving only the logo and header-actions -
   * flex-start would then pack them together, landing the hamburger right
   * next to the logo instead of at the far edge.
   */
  .header-layout-1 .header-inner {
    justify-content: space-between;
  }

  .header-wrapper nav {
    position: fixed;
    padding: var(--space-5xl) var(--space-3xl);
    top: 0;
    right: -18.125rem;
    height: 100vh;
    background: var(--color-bg);
    width: 17.5rem;
    max-width: 17.5rem;
    z-index: 10;
    box-shadow: var(--shadow-drawer);
    transition: right 0.3s ease, color 0.3s ease;
  }

  .header-wrapper.mobile-nave-active nav {
    right: 0;
    transition: right 0.3s ease, color 0.3s ease;
  }

  .main-menu li {
    width: 100%;
  }

  .header .menu-close-icon {
    display: flex;
    top: 20px;
    right: 20px;
  }

  .header-wrapper .main-menu>li>a {
    padding: 0;
    display: block;
  }

  .header .menu-title {
    display: inline-block;
  }

  .main-menu {
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
    width: 100%;
  }
}

@media (max-width: 768px) {

  [class^="col-"],
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: 100%;
    max-width: 100%;
    flex: none;
  }
}