#references
  padding: 80px 0
  background-color: $yellow

  h1
    font-size: 2rem
    line-height: 1.2
    color: $darkBrown
    text-align: center

  .list
    column-count: 2
    column-gap: column(1, 12)

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

    //+flex(space-between, flex-start)
    //+flex-rows
    width: column(10, 12)
    margin: 60px auto 0

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

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

    article
      +flex(space-between, center)
      width: column(19, 20)
      padding: 60px 30px
      margin-bottom: 30px
      background-color: white
      -webkit-column-break-inside: avoid /* Chrome, Safari, Opera */
      page-break-inside: avoid /* Firefox */
      break-inside: avoid /* IE 10+ */

      &.extra-padding
        padding: 60px

      +respond-to-width(840)
        width: 100%
        max-width: 550px
        margin-left: auto
        margin-right: auto

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

        &.no-text
          width: 100px
          height: 100px
          border-radius: 0


      .content
        width: calc(100% - 205px)

        &.text-only
          width: 100%
        &.image-only
          width: calc(100% - 125px)

        h2
          padding-right: 30px
          font-size: 1rem
          line-height: 1.2
          font-weight: bold()
          color: $darkBrown
          +respond-to-width(850)
            font-size: 0.9rem

        p
          font-size: 0.75rem
          line-height: 1.5
          font-weight: light()
          color: $brown

          &:first-child
            margin-top: 0


          &:last-child
            margin-bottom: 0