/*==========================================================================
  Blog detail page
  ========================================================================== */
.post
  @import '../../partials/posts/header/postHeaderShow'

  // Normally we would use a percentage as a width,
  // but the width needs to stay fixed until it doesn't fit
  .post-container
    width: 720px
    margin: 0 auto
    white-space: normal
    font-size: $baseFontSize

  .post-body
    section:last-child
      margin-bottom: column(1,6)

    h2
      margin: 2rem 0

    p:last-child
      margin: 0

  .post-intro
    margin: column(1,6) 0 column(.5,6)
    color: $darkBodyText
    font-size: 1.22222rem
    line-height: 1.54545

  .post-full-image
    img
      display:  block
      margin: column(.5,6) 0
      width: 100%

  .back-to-grid
    margin-bottom: column(.5,10)

  .related-posts
    border-top: 1px solid $borderColor
    padding: column(.5) 0 column(1)

    h2
      display: block
      margin-top: -10px
      font-weight: 300
      font-size: 1.5rem


  +respond-to-width($smGridBreakpoint)

    .post-container
      // Change back to percentage
      width: column(13)

    .post-intro
      font-size: 1.1rem

  +respond-to-width($xsGridBreakpoint)
    .post-container
      width: 100%
      padding: 0 20px