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

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



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

  .blog-post {
    position: relative;

    &::before {
      top: 8px; left: -1.2rem;

      content: "\00B7";
      font-size: 3.5rem;
      line-height: 0;
      position: absolute;
    }
  }



  .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;
    }
  }
}