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

.post
  width: 100%
  max-width: 520px
  background: linear-gradient(45deg, $blueGradient)
  box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

  font-size: 1rem
  line-height: 1.6

  @supports (display: flex)
    height: 100%
    max-width: none
    a
      height: 100%
      padding-bottom: 0

  +respond-to-width(600)
    font-size: 0.9rem

  a
    display: block
    position: relative
    width: 100%
    height: 0
    padding-bottom: 65%
    text-decoration: none

    @supports (display: flex)
      height: 100%

    figure
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%

      &:before
        content: ''
        position: absolute
        z-index: 1
        left: 0
        top: 0
        width: 100%
        height: 100%
        background: linear-gradient($blueGradient)
        opacity: 0.8
        transition: opacity 0.4s

      span
        position: absolute
        left: 0
        top: 0
        width: 100%
        height: 100%
        background-size: cover
        background-position: center
        display: none

        &.medium
          display: block


    .date
      position: absolute
      left: 8%
      top: 12%
      z-index: 3
      font-size: 3em
      font-weight: bold()
      line-height: 1
      color: $lightBlue
      transition: color 0.4s

      +respond-to-width(950)
        font-size: 2.5em

      +respond-to-width(950)
        font-size: 2em

    h2
      position: absolute
      z-index: 4
      width: calc(80% - 10px)
      left: 9%
      bottom: 9%
      color: $lightGray

      font-size: 1.1em
      line-height: 1.4
      font-weight: semi-bold()
      transition: color 0.4s

      .arrow
        position: absolute
        z-index: 2
        width: 15px
        right: -20px
        bottom: -7px
        transform: translate3d(0,0,0)
        transition: transform 0.4s

        .arrow-icon
          width: 100%
          transform-origin: center
          transform: rotate(270deg)

          .st0
            fill: $lightBlue
            transition: fill 0.4s

  &:hover
    a
      figure
        &:before
          opacity: 0.2

      .arrow
        transform: translate3d(5px,0,0)
        .arrow-icon
          .st0
            fill: white

      h2, .date
        color: white

  +respond-to-width(480)
    a
      height: auto
      padding-bottom: 0

      figure
        position: relative
        height: 0
        padding-bottom: 65%

      .arrow
        display: none

      h2
        position: relative
        width: 100%
        left: 0
        bottom: 0
        padding: 20px 15px

  .first-page &
    &#post-0
      a
        padding: 5% 8%

        .ie &
          padding: 0 0 65% !important

          .date
            font-size: 3em !important

          h2
            font-size: 1.1em !important

          +respond-to-width(480)
            padding-bottom: 0 !important
            height: auto

        figure
          span
            &.medium
              display: none
            &.large
              display: block

            +respond-to-width(950)
              &.large
                display: none
              &.medium
                display: block

        .date
          top: 8%
          font-size: 3.75em

        h2
          font-size: 2em
          padding-right: 15% !important

          +respond-to-width(1750)
            padding-right: 15%

        +respond-to-width(840)
          padding: 0 0 65%

          .date
            top: 12%
            font-size: 2em

          h2
            font-size: 1.1em
            padding-right: 20px !important

        +respond-to-width(480)
          height: auto
          padding-bottom: 0