/*==========================================================================
  News detail page
  ========================================================================== */
.posts.post-detail
  .post-content
    position: relative
    .placeholder
      width: column(10, 12)
      margin: auto

      +respond-to-width(900)
        width: 100%


    .post-header
      +flex(space-between, flex-end)
      margin-top: -75px

      .title
        width: column(5, 12)
        padding: 0 20px
        background-color: $blueishGray

        h1
          margin-top: 50px
          +phenomena
          color: $brown
          font-size: 1.6rem
          line-height: 1.25
          text-align: center

        .arrow-button
          margin-top: 15px
          margin-bottom: 35px

      .return-to-overview
        width: 250px

        .button
          &:before
            content: ''
            margin-right: 15px
            +translate3dRotate(0,0,0, 180deg)
            transition: transform 0.3s
            +arrowBlue

          &:after
            display: none

          &:hover
            &:before
              +translate3dRotate(-3px,0,0, 180deg)

      .post-date
        width: 250px
        font-size: 0.8rem
        line-height: 1.6
        color: $blue
        text-align: right

        p
          margin: 0

        time
          +metropolisSemiBold

      +respond-to-width(1450)
        +flex-rows

        .title
          width: calc(100% - 250px)
          padding: 0 40px

          h1
            text-align: left
            max-width: 500px

          .arrow-button
            margin-left: 0


        .return-to-overview
          +order(3)
          width: 100%
          margin-top: 40px

          .button
            max-width: 250px

      +respond-to-width(680)
        .title
          width: 100%

        .return-to-overview
          width: 250px
          +order(2)

        .post-date
          width: 150px
          +order(3)

      +respond-to-width(475)
        text-align: center
        .title
          width: 100%

          .arrow-button
            margin-left: auto

        .return-to-overview
          width: 100%
          +order(3)

        .post-date
          width: 100%
          text-align: center
          +order(2)
          margin-top: 40px

    .post-dynamic
      margin-bottom: 60px

  .relative-posts
    background-color: $blueishGray
    padding: 90px 0 60px
    text-align: center

    +respond-to-width(900)
      padding-top: 60px

    .grid-row
      >.button
        margin-top: 50px

        &:before
          content: ''
          margin-right: 15px
          +translate3dRotate(0,0,0, 180deg)
          transition: transform 0.3s
          +arrowBlue

        &:after
          display: none

        &:hover
          &:before
            +translate3dRotate(-3px,0,0, 180deg)