.docs {
  display: flex;
  padding: 0 var(--layout-padding-horizontal);

  @media (--mobile) {
    flex-wrap: wrap;
  }

  &__aside {
    width: var(--layout-width-aside);

    @media (--mobile) {
      width: 100%;
      flex-basis: 100%;
      padding: 20px var(--layout-padding-horizontal) !important;
      margin: 0 calc(-1 * var(--layout-padding-horizontal));
      border-bottom: 1px solid var(--color-line-gray);
    }
  }

  &__content {
    flex-grow: 2;
    word-wrap: break-word;

    @media (--mobile) {
      width: 100%;
      flex-basis: 100%;
    }

    &-inner {
      max-width: var(--layout-width-main-col);
      margin: 0 auto;
    }

    @media not (--mobile) {
      margin-bottom: 80vh;
    }
  }

  &__aside-right {
    @media (--mobile) {
      display: none;
    }
  }

  &__aside,
  &__content {
    padding: var(--layout-padding-vertical) 0;

    @media (--mobile) {
      padding: 20px 0;
    }
  }
}