/*==========================================================================
  News row
  ========================================================================== */

.posts-row
  position: relative
  min-height: 500px
  padding-bottom: 90px
  text-align: center

  .button
    margin-bottom: 0

  .placeholder
    width: column(22, 24)
    +flex(flex-start, flex-start)
    margin: 0 auto 65px

    article
      position: relative
      width: calc(100% / 3)

      a
        text-decoration: none

      figure
        position: relative
        width: 100%
        overflow: hidden

        .image-placeholder
          width: 100%
          padding-bottom: 100%
          height: 0
          position: relative

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

          &.medium
            display: none

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

      .content
        position: absolute
        bottom: 20px
        left: -25px
        +flex(flex-start, center)
        width: calc(100% - 50px)
        transform: translate3d(0,0,0)
        transition: transform 0.5s


        h3
          width: calc(100% - 60px)
          padding: 30px 10px 30px 45px
          margin: 0
          min-height: 102px
          +metropolis
          font-size: 0.9rem
          line-height: 1.25
          color: white
          text-align: left
          background-color: rgba($brown, 0.85)
          transition: background-color 0.5s, color 0.4s

        .date
          position: absolute
          right: 0
          top: 0
          +flex(center, center)
          width: 60px
          height: 100%
          background-color: $lightBlue
          transition: background-color 0.5s

          span
            +flex(center, center)
            width: 30px
            height: 22px
            border: 1px solid rgba($blueishGray, 0.5)
            +metropolisSemiBold
            font-size: 0.8rem
            line-height: 1.2
            color: $blue
            transition: color 0.4s

            &:first-child
              border-bottom: none

      &:hover
        .content
          transform: translate3d(0,-25px,0)
          h3
            background-color: rgba($lightBlue, 0.85)
            color: $blue

          .date
            background-color: $blue
            span
              color: white

    .overview
      position: relative
      display: none
      background-color: $blue
      width: calc(50% - 25px)

      .wrapper
        position: relative
        width: 100%
        padding-bottom: 100%
        height: 0

      a
        position: absolute
        width: 100%
        height: 100%
        +flex(center, center)
        top: 0
        left: 0
        text-decoration: none

        p
          +phenomena
          font-size: 1.6rem
          line-height: 1.25
          color: white
          margin: 0 0 20px

        .button
          border-color: white
          color: white
          background-color: transparent
          transition: background 0.3s
          &:after
            +arrowWhite
            transform: translate3d(0,0,0)
            transition: transform 0.3s

        &:hover
          .button
            background-color: rgba(white, 0.1)

            &:after
              transform: translate3d(5px,0,0)

  +respond-to-width(1350)
    .grid-row
      >.button
        display: none

    .placeholder
      +flex(space-between, flex-start)
      +flex-rows
      margin-bottom: 0

      .overview
        display: block

      article
        width: calc((100% - 50px ) / 2)
        margin-bottom: 50px

        .content
          width: calc(100% - 40px)

  +respond-to-width(750)
    .placeholder
      article
        width: 100%
        max-width: 500px
        margin-left: auto
        margin-right: auto

        figure
          .image-placeholder
            padding-bottom: 70%

        .content
          position: relative
          width: 100%
          top: 0
          left: 0
          transform: translate3d(0,0,0) !important

          h3
            padding: 30px 20px

      .overview
        width: 100%
        margin-right: auto
        margin-left: auto
        max-width: 500px

        .wrapper
          padding-bottom: 0
          height: 250px

          +respond-to-width(400)
            height: 200px

    //
    //  article
    //    width: 100%
    //    a
    //      +flex(flex-start, flex-start)
    //
    //    figure
    //      width: 40%
    //
    //    .content
    //      transform: translate3d(0,0,0) !important
    //      position: relative
    //      width: 60%
    //      left: 0
    //      bottom: 0