.references-block
  +flex(flex-start, flex-start)
  flex-direction: column
  background:
    color: $white
  padding: $paddingTextBlock

  +respond-to-width(900)
    padding: $paddingSmallTextBlock

  margin-bottom: 100px

  +respond-to-width(900)
    margin-bottom: 50px

  box-shadow: 0 14px 28px rgba(0,0,0,0.04), 0 10px 10px rgba(0,0,0,0.05)

  .reference
    max-width: $referenceMaxWidth
    +flex(flex-start, center)
    flex-direction: row
    margin-bottom: 50px
    text-align: center

    +respond-to-width(600)
      flex-direction: column

    .image
      height: 200px
      min-width: 200px
      border-radius: 999px
      background-size: cover
      background-position: center

    &.business
      width: 100%
      a
        color: $black
        &:hover
          .reference-content-container
            h3
              color: $secondaryColor
        +flex(flex-start, center)

        +respond-to-width(600)
          flex-direction: column

        .reference-content-container

          text-align: left
          max-width: $textMaxWidth
          padding: 0 $paddingSmallTextBlock
          margin-left: $paddingTextBlock
          h3
            color: $primaryColor
            margin-top: 10px
          +respond-to(small)
            margin-left: 0

    .reference-content-container
      text-align: left
      max-width: $textMaxWidth
      padding: 0 $paddingSmallTextBlock

      h3
        color: $primaryColor
        margin-top: 10px