.c-post {
  text-decoration: none;

  &--has-thumb {
    .c-post__title,
    .c-pub-time,
    .c-tag__item {
      color: $color-font-white;
    }
  }
}

.c-post {
  &__header {
    &--over-img {
      display: table-cell;
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }

    &__meta {
      margin-top: 0.4em;
    }
  }

  &__title {
    line-height: 1.4;
    font-size: 1.8rem;
    font-weight: 500;
    color: $color-font-base;

    @include mq('medium') {
      font-size: 1.4rem;
    }
  }
}

.c-post {
  &__body {
    margin-top: 4rem;

    * + * {
      margin-top: 0.9rem;
    }

    h2 {
      margin-top: 2.6em;
      line-height: 1.8;
      font-size: 1.7rem;
    }

    h3 {
      margin-top: 1.6em;
      line-height: 1.6;
      font-size: 1.3rem;
    }

    h4,
    h5 {
      margin-top: 1.6em;
      font-size: 1rem;
    }

    img {
      width: 100%;
    }

    pre {
      margin: 1.6rem 0;
      background-color: #383737;
      padding: 1em;
      overflow: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
      border-radius: 5px;

      code {
        @extend %code-base-style;
        width: 100%;
      }
    }

    blockquote {
      margin: 1.6rem 1.2rem;
      padding: 0 1em;
      border-left: 4px solid darken($color-medium-grey,  10%);
      color: darken($color-medium-grey,  10%);
    }

    p {
      line-height: 1.8;

      > code {
        @extend %code-base-style;
        padding: 0.2em 0.4em;
      }
    }

    a {
      color: #3779cc;

      &:hover {
        text-decoration: none;
      }
    }
  }


  &__footer {
    margin-top: 40px;
    border-top: 1px solid $border-base-color;

    > * + * {
      margin-top: 20px;
    }
  }
}