.references
  .reference-row
    padding: 80px 0
    background-color: $broosOffwhite

    h1
      color: $broosDarkBlue
      font-size: 2rem
      line-height: 1.4
      text-align: center

    .overview
      column-count: 2
      column-gap: column(0.5, 12)

      -moz-column-fill: balance /* Firefox */
      column-fill: balance

      //+flex(space-between, flex-start)
      //+flex-rows
      width: 100%
      margin: 60px auto 0

      +respond-to-width(840)
        column-count: 1
        column-gap: 0


      article
        +flex(space-between, center)
        width: column(19, 20)
        margin: 0 15px 60px
        background-color: white
        padding: 25px 20px
        height: auto
        box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05)
        -webkit-column-break-inside: avoid /* Chrome, Safari, Opera */
        page-break-inside: avoid /* Firefox */
        break-inside: avoid /* IE 10+ */

        .icon
          width: column(4.5, 12)
          padding: column(0.125, 4.5)

          figure
            width: 100%
            height: 100%
            border-radius: 100%
            overflow: hidden
            img
              width: 100%

            //.image
            //  position: absolute
            //  left: 0
            //  top: 0
            //  width: 100%
            //  height: 100%
            //  transform: scale3d(1, 1, 1)
            //  transform-origin: center
            //  transition: transform 0.5s
            //
            //  background-size: cover
            //  background-position: center

        .content
          padding: 0 20px
          width: column(7.5, 12)

          &.full
            width: 100%

          h3
            font-size: 1rem
            line-height: 1.4
            font-weight: bold
            margin: 1rem 0
            color: $broosDarkBlue

          p
            margin: 0
            font-size: 0.7rem
            line-height: 1.4
            color: $broosDarkBlue

            strong
              color: $broosDarkBlue

        .date
          font-size: 0.65rem
          font-weight: semi-bold()
          position: absolute
          right: 0
          bottom: -1rem
          color: $broosDarkBlue

        &:nth-child(2n)
          .date
            right: auto
            left: 0

        +respond-to-width(480)
          margin: 0 0 30px



      //@supports (display: flex)
      //  display: grid
      //  grid-template-columns: 1fr 1fr
      //  grid-gap: 60px
      //  margin-bottom: 60px
      //
      //  article
      //    margin: 0
      //    //height: 100%
      //
      //
      //  +respond-to-width(1700)
      //    grid-gap: 30px 30px
      //
      //  +respond-to-width(1500)
      //    grid-gap: 60px 60px
      //    grid-template-columns: 1fr 1fr
      //
      //  +respond-to-width(950)
      //    grid-gap: 30px 30px
      //
      //  +respond-to-width(840)
      //    display: block
      //    max-width: 520px
      //    margin-left: auto
      //    margin-right: auto
      //    article
      //      margin-bottom: 30px
      //      flex-direction: column
      //      .icon
      //        width: 60%
      //      .content
      //        width: 100%
      //
      //
      //      &:nth-child(2n)
      //        .date
      //          right: 0
      //          left: auto