.docs.page,
.blog.page {
  padding: 69px $tiny $xl;
  text-align: left;
  @media screen and (min-width: $mobile) {
    padding: 157px $medium $xl;
  }

  .sidebar {
    @media screen and (min-width: $tablet) {
      @neat-span-columns 6 24;
    }
  }

  .docs-nav {
    display: none;

    @media screen and (min-width: $tablet) {
      display: block;
      height: 100%;
      overflow-y: auto;
    }

    .nav-link,
    .subnav-link {
      display: block;
      font-weight: $regular;
      font-size: $tiny;
      color: $grey;
      line-height: 1.3;
      margin: 10px 0;
      text-decoration: none;
      text-transform: capitalize;
      transition: color 0.2s ease;

      &.active {
        color: $darkGreen;
        font-weight: $bold;
      }

      &:hover {
        color: $darkGreen;
      }
    }
  }

  .docs-nav-section {
    margin-bottom: 30px;
  }

  .docs-nav-section-list {
    margin: 0;
  }

  .docs-nav-section-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .nav-subsections {
    margin: $tiny 0;
    padding: 0 0 0 $tiny;
    border-left: 2px solid $lightestGrey;
    list-style-type: none;

    li {
      margin: 0;
      padding: 0;
    }

    .subnav-link {
      font-size: 14px;
    }
  }

  h1,
  h2 {
    font-size: 36px;
    line-height: 1.4em;

    &.intro-headline {
      padding: 0 $small;
      margin-bottom: 86px;
    }
  }

  h2 {
    font-size: $small;
  }

  h3 {
    color: $grey;
    font-size: 20px;
    margin-top: $medium;
    margin-bottom: $small;

    &.inverse {
      color: white;
    }
  }

  .meta-info {
    font-size: $tiny;
  }

  table {
    width: 100%;
    text-align: left;
    margin: 34px 0 $medium 0;

    th,
    td {
      padding: $micro;
    }

    th {
      font-size: 18px;
      font-weight: $bold;
    }

    tbody tr {
      &:nth-child(odd) {
        background: #fdfdfd;
      }
    }

    td {
      font-size: 14px;
    }
  }
}

.docs-content,
.blog-content {
  font-size: 18px;
  line-height: 28px;

  .edit-this-page {
    float: right;
  }

  #pencil {
    fill: #7ca511;
  }

  @media screen and (min-width: $tablet) {
    @neat-span-columns 17 24;
    @neat-shift 1 24;
  }

  h2:not(:first-child) {
    margin-top: $medium;
  }
  p {
    line-height: 1.7;
  }

  a {
    text-decoration: none;
    color: $darkGreen;
  }

  iframe {
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  table {
    background: #f7f7f7;
    border-radius: $borderRadius;
  }

  pre {
    margin: 30px -16px !important;
    @media (min-width: $xlarge) {
      margin-right: -120px !important;
    }
  }

  figure {
    margin-left: 0;

    .gatsby-highlight {
      margin-top: -20px;
    }
  }

  figcaption {
    font-style: italic;
  }

  :not(pre) > code {
    color: inherit;
    background: $lightestGrey;
    border-radius: 2px;
    padding: 2px 6px;
    white-space: nowrap;
  }
}

.blog-content h1 {
  margin-bottom: 0;
}

.blog-list-item h2 {
  margin: 48px 0 0;
  line-height: 36px;
}

.mobile-docs-nav {
  display: block;
  position: relative;
  margin-bottom: $small;

  @media screen and (min-width: $tablet) {
    display: none;
  }
}

.mobile-docs-nav-btn {
  display: block;
  width: 100%;
}

.mobile-docs-nav-content {
  /* border: 1px solid $lightishGrey; */
  background-color: $lighterGrey;
  padding: $tiny;
}

.mobile-docs-nav-list {
  list-style: none;
  margin: 0;

  .mobile-docs-nav-list {
    margin-left: $small;
  }
}

.mobile-docs-nav-item {
  font-weight: bold;
  font-size: 14px;
}

.mobile-docs-nav-link {
  font-size: 16px;
  display: block;
  padding: $micro;
}