#references

  .main-content
    background-color: $lightGrey
    padding-bottom: 60px  

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

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

  h2
    font-family: $headerFamily
    font-size: 1.3rem
    letter-spacing: -0.4px
    font-weight: bold()

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

  .references
    margin-bottom: 60px

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


.references__item
  margin: 0 0 20px
  padding: 40px
  //border: 1px solid $blue
  background-color: white
  box-shadow: 0 0 10px 0 rgba(black, 0.2)
  page-break-inside: avoid
  break-inside: avoid

  +respond-to-width-beyond(1024)
    display: flex
    justify-content: space-between

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

.references__image
  width: 150px

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

.references__content

  +respond-to-width(1024)
    margin-top: 20px

  +respond-to-width-beyond(1024)
    //width: calc(100% - 180px)