#references
  background-color: $offsetWhite

  h2.title
    margin: 0
    padding: 40px 0
    font-size: 2.2rem
    text-align: center

    +respond-to-width(1100)
      margin-top: 60px

  h2
    font-size: 1.3rem
    font-weight: regular()

  +respond-to-width(400)
    .grid-row
      width: 100%


.references
  margin-bottom: 60px

  +respond-to-width-beyond(670)
    column-count: 2
    column-gap: 60px // Has to be pixels for IE
    column-fill: balance




.references__item
  margin: 0 0 60px
  padding: 60px
  background-color: #fff
  page-break-inside: avoid
  break-inside: avoid

  +respond-to-width-beyond(1024)
    display: flex

  +respond-to-width(400)
    padding: 40px 20px

  // hack to remove unwanted white space because of columns
  *:first-child
    margin-top: 0

.references__image
  transform: translateY(-30px)

  +respond-to-width-beyond(1024)
    flex: 1 0 calc(100%/3)
    width: calc(100%/3) // for IE
    transform: translateX(-30px)

  img
    max-width: 100%
    border-radius: 500px
    overflow: hidden

.references__content
  +respond-to-width-beyond(1024)
    flex: 1 1 auto