/**
 * Posts
 */
 .post-header {
    margin-bottom: $spacing-unit;
  }

.post-title {
  @include relative-font-size(2.625);
  letter-spacing: -1px;
  line-height: 1;

  @include media-query($on-laptop) {
    @include relative-font-size(2.25);
  }
}

.post-content {
  margin-bottom: $spacing-unit;

  > p {
    > img {
      display: block;
      margin: 0 auto;
    }

    word-spacing: 1px;
  }

  ul.resources-link {
    list-style: none; 
    margin-left: 1.9em;

      @include media-query($on-palm) {
        margin-left: 0;

        > li {margin-bottom: 0.75em;}
      }
  }

  > h1:not(:first-of-type){margin-top: $spacing-unit * 1.65;}

  h2 {
    @include relative-font-size(2);

    &::after, &::before {
      content: "";
      display: block;
      border-bottom: 1px dashed black;
    }

    &::after {margin-top: .2em;}
    &::before {margin-bottom: .2em;}

    &:first-of-type {margin-top: $spacing-unit * 1.5;}

    &:not(:first-of-type) {margin-top: $spacing-unit * 2.5;}

    @include media-query($on-laptop) {
      @include relative-font-size(1.75);
    }
  }

  h2 ~ h3 {margin-top: $spacing-unit * 1.45;}
  h2 + h3 {margin-top: 0;}

  h3 {
    @include relative-font-size(1.625);

    @include media-query($on-laptop) {
      @include relative-font-size(1.375);
    }
  }

  h3 ~ h4 {margin-top: $spacing-unit * 1.35;}
  h3 + h4 {margin-top: 0;}

  h4 {
    @include relative-font-size(1.25);

    @include media-query($on-laptop) {
      @include relative-font-size(1.125);
    }
  }
}

.caption {
  color: $grey-color;
  font-size: $small-font-size;
  padding-bottom: 1.5em;
  text-align: center;
  width: 100%;
  display: block;
}

.relative-posts {
  color: $grey-color-dark;
  display: flex;
  font-size: $small-font-size;
  justify-content: space-between;
  margin-top: 2em;

  a {font-size: $base-font-size * 1.2;}

  .previous-post {
    text-align: left;
    max-width: 45%;
  }

  .next-post {
    text-align: right;
    max-width: 45%;
  }

  @include media-query($on-laptop) {
    flex-flow: column wrap;
    align-content: center;
    justify-content: center;
    text-align: center;        

    > * {margin-top: 2em;}

    .previous-post, .next-post {text-align: center; max-width: 90%;}
  }
}

.post-meta-icons {
  width: 1.5em; 
  height: 1.5em;
  padding: 0 .2em;
}