#references

  h1
    padding-left: 20px

  .dynamic-content
    padding-top: 80px


  .references
    margin-top: 40px
    margin-bottom: 60px

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

  .references__main
    padding: 40px
    border: 1px solid $color-secondary-300
    border-radius: 5px

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

  .references__item
    margin: 0 0 20px
    padding: 20px
    page-break-inside: avoid
    break-inside: avoid

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

  .references__image
    background-size: cover
    background-position: center
    position: relative
    margin: 0 auto
    border-radius: 500px
    transform: translateY(-15px)
    overflow: hidden
    width: 150px
    height: 150px

    +respond-to-width-beyond(1024)
      flex-grow: 0
      flex-shrink: 0
      transform: translateX(-15px)

    img
      max-width: 100%


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

    & > *:first-child:not(p)
      font-size: 1rem
      padding-left: 0

    p
      margin: 0
    * + p
      margin-top: 1em

    em
      opacity: 0.5