/*==========================================================================
  Post
  ========================================================================== */

.post
  background-color: white
  border-radius: 0 10px 10px 0
  width: column(10, 12)
  margin: auto

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

  a
    position: relative
    text-decoration: none
    +flex(flex-end, flex-start)

    figure
      position: absolute
      top: 0
      left: 0
      width: 50%
      height: 100%
      overflow: hidden

      span
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        transform: scale3d(1, 1, 1)
        transition: all 0.8s
        background:
          size: cover
          repeat: no-repeat
          position: center

    .text
      position: relative
      width: 50%
      min-height: 350px
      padding: 90px 40px 50px
      font-size: 1rem
      line-height: 1.6
      +flex(flex-start, normal)
      +flex-rows

      .date-block
        position: absolute
        +flex(flex-end, flex-start)
        +flex-rows
        width: 84px
        left: -42px
        top: 0

        .day, .month
          width: 42px
          height: 42px
          +flex(center, center)
          color: white
          font-size: 0.9rem
          line-height: 1
          font-weight: semi-bold()

        .day
          background-color: $flatOrange
        .month
          background-color: $darkPurple

        .year
          +flex(center, center)
          width: 42px
          height: 30px
          font-size: 0.65rem
          font-family: rubik()
          color: $purple
          margin: 0

      .top
        display: block
        width: 100%
        margin-bottom: 20px

      h3
        margin: 0
        font-size: 1.2em
        line-height: 1.2
        color: $darkPurple
        font-family: workSans()
        font-weight: medium()

      p
        font-weight: light()
        font-size: 0.8em
        color: $purple

      .bottom
        width: 100%
        +flex(space-between, flex-end)
        +flex-rows

        .written-by
          font-family: rubik()
          font-size: 0.75rem
          font-style: italic
          color: $purple
          margin-top: 20px

          +respond-to-width(1200)
            display: none
          +respond-to-width(850)
            display: block

        .button
          position: relative
          display: inline-block
          min-width: 200px
          padding: 8px 55px 8px 20px
          border-radius: 10px
          color: white
          background-color: $lightGreen
          font-family: rubik()
          font-weight: medium()
          font-size: 0.8rem
          transition: background 0.3s
          cursor: pointer

          &:after
            content: ''
            display: inline-block
            position: absolute
            right: 20px
            bottom: 13px
            +arrowWhite
            +translate3d(0,0,0)
            transition: transform 0.3s

    +respond-to-width(1200)
      figure
        width: 60%
      .text
        width: 40%

    &:hover

      // On smaller device the font get blurry when hovering because of the scale3d
      +respond-to-width-beyond(500)
        figure
          span
            transform: scale3d(1.05, 1.05, 1)

      .text
        .bottom
          .button
            background-color: $green
            &:after
              +translate3d(5px, 0, 0)

  +respond-to-width(850)
    border-radius: 0 0 10px 10px
    a
      display: block

      figure
        position: relative
        width: 100%
        height: 0
        padding-bottom: 60%

      .text
        width: 100%
        padding-top: 80px
        min-height: 0

        .date-block
          left: auto
          right: 0