.Page--cols() {
  &-container {
    display: flex;
  }

  &-content {
    width: var(--content-width);
  }

  &-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
  }

  &-content, &-sidebar {
    margin-top: 30px;
  }
}

.Page {
  --content-width: 100%;
  --sidebar-width: 190px;
  --gap: 50px;
  padding-bottom: var(--page-bottom-padding);

  &-container {
    gap: var(--gap);
  }

  @media @desktop-up {
    .Page--cols()
  }

  @media @phone, @tablet {
    &-content {
      margin-top: 15px;
    }
  }

  &--vertical {
    @media @desktop-up {
      --sidebar-width: 100%;
      --gap: 30px;

      .sideNav {
        .sideNav--horizontal();
        width: auto;
        padding: 0;

        &:after {
          display: none;
        }

        > ul > li:first-child {
          width: 190px;
        }
      }

      .Page-container {
        flex-direction: column;
      }

      .Page-content {
        margin-top: 0;
      }
    }
  }
}