.wrapper.post {
  max-width: -webkit-calc(#{660px} - (#{$spacing-unit} * 2));
  max-width: calc(#{660px} - (#{$spacing-unit} * 2));

  @include media-query($on-mobile) {
    padding-left: $spacing-unit - 10;
    padding-right: $spacing-unit - 10;
  }
}

/**
 * Post title
 */
.header {
  margin-top: 125px;

  .header-title {
    text-align: center;
    font-size: 2em;
    font-family: $first-font-family;
    line-height: 1.2;
    font-weight: 700;
    color: $black;
    margin-bottom: 20px;

    @include media-query($on-mobile) {
      font-size: 1.9em;
    }
  }
}

/**
 * Post meta 
 */
.post-meta {
  font-family: $first-font-family;
  text-align: center;
  font-size: $small-font-size;
  margin-bottom: 5em;
  padding-top: 3px;
  line-height: 1.3;

  time {
    color: $gray;
    position: relative;
    margin-right: 24px;

    &::after {
      background: $light;
      bottom: 1px;
      content: " ";
      display: block;
      height: 2px;
      position: absolute;
      right: -20px;
      width: 12px;
    }
  }

  span[itemprop="author"] {
    color: $gray;
    border-bottom: 1px dotted $light;
  }

  .tags {
    max-width: 200px;
    margin: 27px auto 0 auto;

    .tag {
      color: $gray;
      line-height: 1;
      font-weight: 800;
      display: inline-block;
      font-size: $small-font-size - 2;
      border-bottom: 2px solid $light;

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

/**
 * Post content
 */
.page-content {
  font-size: 1em;
  color: $gray;
  padding-top: 8px;

  iframe {
    text-align: center;
  }

  figure {
    margin: auto -2em;

    img {
      border-radius: 2px;
    }

    figcaption {
      margin-top: 5px;
      font-style: italic;
      font-size: 15px;
    }
  }

  >p {
    margin: 0;
    padding-top: $spacing-unit - 15;
    padding-bottom: $spacing-unit - 15;
  }

  ul.task-list {
    list-style: none;
    margin: 0;

    li input[type="checkbox"] {
      margin-right: 10px;
    }
  }

  dl dt {
    font-weight: 700;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: $first-font-family;
    color: $black;
    font-weight: 700;
    margin-top: $spacing-unit;
    margin-bottom: 0;
  }

  h1 {
    @include relative-font-size(1.75);
  }

  h2 {
    @include relative-font-size(1.563);
  }

  h3 {
    @include relative-font-size(1.438);
    border-bottom: 1px solid $light;
    padding-bottom: 4px;
  }

  h4 {
    @include relative-font-size(1.188);
  }

  h5 {
    @include relative-font-size(1);
  }

  h6 {
    @include relative-font-size(0.875);
  }
}

hr {
  border-bottom: 0;
  border-style: solid;
  border-color: $light;
}

.post-nav {
  font-family: $first-font-family;
  font-size: $small-font-size;
  display: flex;
  position: relative;
  margin-top: 5em;
  border-top: 1px solid $light;
  line-height: 1.4;

  .post-nav-item {
    border-bottom: 0;
    font-weight: 800;
    padding-bottom: 10px;

    &:hover,
    &:focus {
      h4 {
        color: $blue;
      }
    }

    h4 {
      color: $gray;
      font-size: $small-font-size;
      margin: 0;
    }

    width: 50%;
    padding-top: 10px;
    text-decoration: none;
    box-sizing: border-box;

    &:nth-child(odd) {
      padding-left: 0;
      padding-right: 20px;
    }

    &:nth-child(even) {
      text-align: right;
      padding-right: 0;
      padding-left: 20px;
    }
  }

  @include media-query($on-mobile) {
    display: block;
    font-size: $small-font-size;

    .post-nav-item {
      display: block;
      width: 100%;
    }

    .post-nav-item:nth-child(even) {
      border-left: 0;
      padding-left: 0;
      border-top: 1px solid $light;
    }
  }
}