.references

  .white-styling-block
    position: relative
    height: 160px
    width: 100%
    background-color: white
    margin-top: -160px



  +respond-to-width(840)
    .image-wrapper
      background-image: none


.references-overview
  @extend .news-overview
  .overview-placeholder

    .articles

      +respond-to-width(840)
        width: column(12,14)

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

      article
        height: auto
        width: calc((100% - 15px) / 2)


        a
          position: relative
          +flex(flex-start, flex-start)
          background-color: $darkGreen
          transition: background-color 0.3s

          figure
            width: calc(100% / 5 * 2)
            padding-top: 50%
            position: relative
            background-color: transparent
            &:after
              display: none

            +respond-to-width(1280)
              padding-top: 60%
            span
              position: absolute
              top: 0
              left: 0
              height: 100%
              width: 100%
              background-position: center
              background-size: cover

          .content
            position: absolute
            right: 0
            top: 0
            padding: 10px 20px 40px
            height: 100%
            width: calc(100% / 5 * 3)
            font-size: 1rem
            line-height: 1.4
            color: white
            +flex(center, center)

            +respond-to-width(1280)
              //font-size: 0.85rem

            .placeholder
              text-align: center

            p
              margin: 0
              font-style: italic

            span
              font-weight: bold()

            .button
              position: absolute
              bottom: 0
              left: 0
              width: 100%
              height: 40px
              background-color: darken($darkGreen, 10%)
              +flex(center, center)
              padding: 0
              transition: background-color 0.3s
              +respond-to-width(700)
                font-size: 0.9rem
                height: 35px

              &:after
                content: ''
                position: relative
                top: 2px
                display: inline-block
                +arrowWhite
                margin-left: 15px
                transition: transform 0.3s
                +translate3d(0,0,0)

          &:hover
            background-color: darken($darkGreen, 10%)
            .content
              .button
                background-color: darken($darkGreen, 15%)
                &:after
                  +translate3d(5px, 0, 0)

          [class^="vso"] &
            background-color: $darkTurquoise
            .content
              .button
                background-color: darken($darkTurquoise, 5%)
            &:hover
              background-color: darken($darkTurquoise, 5%)
              .content
                .button
                  background-color: darken($darkTurquoise, 10%)

        //+respond-to-width(1500)
        //  width: calc((100% - 30px) / 3)
        //
        //+respond-to-width(950)
        //  width: calc((100% - 15px) / 2)

        +respond-to-width(950)
          a
            .content
              font-size: 0.9rem

        +respond-to-width(650)
          width: 100%
          a
            .content
              font-size: 1.2rem
            figure
              padding-top: 50%

        +respond-to-width(400)
          a
            .content
              font-size: 1rem
            figure
              padding-top: 60%