.single-post {
  background: $color-white;
  min-height: 100vh;
  padding-bottom: 4rem;
  padding-top: 5rem;

  & .container,
  .post--related .container {
    margin: 0 auto;
    max-width: 700px;
    padding: 0 2rem;
  }

  .post--feature-image {
    margin-top: 0;
    text-align: center;

    img {
      max-width: 100%;
      width: 760px;
    }

    .photo-credit {
      display: block;
      font-size: 0.8rem;
      font-style: italic;
      margin: 0 auto;
      margin-top: -0.5rem;
      max-width: 760px;
      text-align: right;
    }
  }

  > .container:first-child .post--title {
    margin-top: 3rem;
  }

  .post--feature-image + .container > .post--title {
    margin-top: 2rem;
  }

  @media screen and (min-width: 760px) {
    > .post--feature-image:first-child {
      margin-top: 4rem;
    }
  }

  .post--title {
    line-height: 1.3;

    @media screen and (min-width: 60em) {
      font-size: 3.5rem;
    }
  }

  .post--meta {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    margin-top: 1rem;
  }

  .post--meta-label {
    color: $color-copy;
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .post--info {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    line-height: normal;
  }

  .post--date {
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
  }

  .post--category {
    letter-spacing: 0.02em;

    a {
      font-weight: 600;
    }

    &[data-category="Forestry"] {
      color: $color-brand;
    }

    &[data-category="Jekyll"] {
      color: #ffcf55;
    }

    &[data-category="Hugo"] {
      color: #54defd;
    }
  }

  /* Content styling */

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }

  h3 {
    font-size: 1rem;
    margin-top: 2rem;
  }

  strong {
    font-weight: 600;
  }

  p {
    color: $color-copy-dark;
    margin-top: 1rem;
    padding-bottom: 1rem;
  }

  a {
    color: $color-brand;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
  }

  blockquote {
    font-style: italic;
    margin: 1rem 0;
    padding-left: 1rem;
    position: relative;
  }

  blockquote::before {
    background: $color-brand;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 2px;
  }

  img {
    max-width: 100%;
  }

  p.tip {
    background: $color-grey;
    padding: 1rem 1rem 1rem 2rem;
    position: relative;

    &::before {
      /* Set the circle size here */
      $circle-size: 1.5rem;

      background: $color-brand;
      border-radius: calc($circle-size / 2);
      color: $color-white;
      content: "!";
      font-weight: 600;
      height: $circle-size;
      left: -calc($circle-size / 2);
      line-height: $circle-size;
      position: absolute;
      text-align: center;
      top: 1rem;
      width: $circle-size;
      z-index: 5;
    }

    &::after {
      background: $color-brand;
      content: "";
      height: 100%;
      left: -0.1rem;
      position: absolute;
      top: 0;
      width: 0.2rem;
      z-index: 0;
    }
  }

  /* Related Posts */
  .post--related {
    background: $color-white;
    border: 1px solid $color-light-grey;
    border-left-width: 0;
    border-right-width: 0;
    margin-top: 4rem;

    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 4rem 2rem 1rem;
    }

    .post--related-title {
      display: block;
      flex: 0 0 100%;
      margin-bottom: 2rem;
      margin-top: 0;
    }

    .blog-post {
      margin-bottom: 2rem;
      max-width: 600px;
    }

    .post-title {
      color: $color-copy-dark;
      font-size: 1.5rem;
      line-height: 1.25;
      margin-bottom: 0.5rem;
      margin-top: 0;
    }

    .post-meta {
      font-size: 0.8rem;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
    }

    .post-date {
      color: $color-medium-dark;
      font-weight: 600;
    }

    .post-category {
      font-weight: 600;
      margin-left: 0.5rem;
    }

    .column {
      flex: 0 0 100%;
      padding: 0 0 0 2vw;

      &:nth-child(2n) {
        padding: 0 2vw 0 0;
      }

      @media screen and (min-width: 500px) {
        flex: 0 0 50%;
      }
    }
  }
}

.author {
  display: block;
  margin-right: 1rem;
}

.author--wrapper {
  align-items: center;
  display: flex;
}

.author--avatar {
  $avatar-size: 2.25rem;

  border-radius: calc($avatar-size / 2);
  height: $avatar-size;
  overflow: hidden;
  width: $avatar-size;
}

.author--info {
  margin-left: 1rem;
}

.author--info span {
  display: block;
}

.author--name {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
}

.author--title {
  font-size: 0.8rem;
  letter-spacing: 0.02em;

  a {
    font-weight: 600;
  }
}
