/*==========================================================================
  News overview page
  ========================================================================== */
.posts

  .arrow-button.centered
    margin-top: 60px
    margin-bottom: 50px

  .no-news
    text-align: center
    margin-top: 80px
    h2
      font-size: 1.8rem
      line-height: 1
      +phenomena
      color: $blue

  .latest-post
    width: column(22)
    max-width: 1680px
    margin: 0 auto 150px

    a
      position: relative
      +flex(space-between, flex-start)
      width: column(22, 24)
      margin: auto
      background-color: $lightGray05
      padding: 50px 0 50px  column(2, 24)
      text-decoration: none

      &:after
        content: ''
        position: absolute
        z-index: 1
        right: column(-1, 20)
        bottom: -60px
        width: column(7, 20)
        height: 80%
        background-color: $blue
        opacity: 0.2


    .content
      position: relative
      z-index: 3
      width: column(9, 20)

      .date
        color: $blue
        font-size: 0.8rem
        line-height: 1

      h2
        color: $brown
        font-size: 1.5rem
        line-height: 1.25
        +phenomena
        margin: 15px 0 25px

      .text
        color: $blue
        font-size: 1.1rem
        line-height: 1.6
        +metropolisLight
        margin-bottom: 50px

        *:first-child
          margin-top: 0

        *:last-child
          margin-bottom: 0

    figure
      position: relative
      z-index: 2
      +order(2)
      width: column(9, 20)
      margin-right: column(1, 20)

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

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

    +respond-to-width(850)
      margin-top: 100px
      a
        display: block

        &:after
          width: 55%

      figure
        margin-right: 0
        top: -40px
        margin-top: -60px
        right: column(-2, 21)
        width: 100%

      .content
        width: column(11, 12)

        .text
          max-width: 500px

    +respond-to-width(580)
      position: relative
      width: 100%

      a:after
        display: none


      figure
        right: 0

      &:after
        content: ''
        position: absolute
        z-index: 1
        right: 0
        bottom: -60px
        width: column(7, 20)
        height: 100%
        background-color: $blue
        opacity: 0.2

        +respond-to-width(450)
          display: none

    +respond-to-width(450)
      margin-top: 50px
      margin-bottom: 50px

      a
        padding: 0
        width: 100%

      figure
        right: 0
        top: 0
        margin-top: 0

      .content
        width: column(10, 12)
        margin: auto
        padding: 20px 0