.region-navigation {
  background-color: var(--color-background-dark);
  position: relative;
  width: 100%;

  @media (width < 1024px) {
    height: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top: var(--header-height-mobile);
    transition: var(--transition-fast);
    z-index: 20;

    & > .region__inner {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
      padding-bottom: var(--space-md);
      row-gap: var(--space-md);
    }
  }
}

.region-navigation--active {
  @media (width < 1024px) {
    height: calc(100vh - var(--header-height-mobile));
    opacity: 1;
    overflow: visible;

    .region__inner {
      overflow: auto;
    }
  }
}