.documentation {
  ol + h1,
  ul + h1 {
    padding-top: 2rem;
  }

  h4 + h2 {
    padding-top: 2rem;
  }



  .blog-posts {
    list-style-type: none;
  }

  .blog-post {
    position: relative;

    &::before {
      background-color: $black;
      border-radius: 50%;
      content: "";
      line-height: 0;
      position: absolute;

      @media (min-width: 901px) {
        width: 7px; height: 7px;
        top: 14px; left: -1.05rem;
      }

      @media (max-width: 900px) {
        width: 6px; height: 6px;
        top: 11px; left: -0.95rem;
      }
    }
  }



  .blog-post__title {
    // display: inline-block; // position is set elsewhere
    line-height: 1.33;

    &::after {
      content: "";
      display: block;
    }
  }

  .blog-post__meta {
    font-size: 80%;
    line-height: 1;
    margin-bottom: 1rem;
  }

  .blog-post__meta__author {
    &::before {
      content: "by";

      @media (min-width: 901px) {
        left: -1.2rem;
      }

      @media (max-width: 900px) {
        left: -1rem;
      }
    }
  }

  .blog-post__meta__date {
    @media (min-width: 901px) {
      margin-right: 1.4rem;
      margin-left: 3.1rem;
    }

    @media (max-width: 900px) {
      margin-right: 1.2rem;
      margin-left: 2.6rem;
    }

    &::before {
      content: "posted";

      @media (min-width: 901px) {
        left: -3.1rem;
      }

      @media (max-width: 900px) {
        left: -2.6rem;
      }
    }
  }

  .blog-post__meta__author,
  .blog-post__meta__date {
    display: inline-block;
    position: relative;

    &::before {
      color: rgba($black, 0.5);
      font-style: italic;
      position: absolute;
      vertical-align: bottom;
    }
  }
}