$font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

.text__layout {
  max-width: $width-tablet-2;
  width: 100%;
  margin: 0 auto;

  @media (max-width: $width-tablet-1) {
    max-width: 100%;
  }

  > div {
    h1 {
      @include h2();
    }

    h2 {
      @include h3();
    }

    > p, > blockquote > p {
      @include ms();
    }

    > blockquote > p {
      font-family: $font-regular-italic;
      border-left: inset;
      padding-left: 10px;
    }

    > h1, > h2, > h3, > h4, > h5, > h6, > p, > div, > ul, > ol, > table, > blockquote {
      margin: 16px 0;
    }

    > ol {
      padding-left: 16px;

      > li {
        list-style-type: decimal;
        margin: 16px 0;

        &::marker, > p {
          @include p();
          font-size: 14px;
        }
      }
    }

    > ul {
      padding-left: 48px;

      @media (max-width: $width-tablet-1) {
        padding-left: 32px;
      }

      li {
        list-style-type: disc;
        @include ms();
      }
    }

    > table {
      @include ms();
      width: 100%;

      td, th {
        padding: 8px 12px;
        border: 1px solid $grey-light;
      }

      th {
        @include font-bold();
      }

      tbody {
        tr:nth-child(odd) {
          background-color: $grey;
        }
      }
    }

    code[class*="language-"],
    pre[class*="language-"] {
      font-size: 0.82em;

      @media (max-width: $width-tablet-1) {
        font-size: 13px;
      }
    }

    code:not([class*="language-"]) {
      font-family: $font-mono;
      font-size: 13px;
    }
  }

  > div > :first-child {
    margin-top: 0;
  }
}