.reference-row
  //padding: 120px 0 100px
  padding: 120px 0 0
  .content-container
    +flex(flex-start, center)
  .title
    margin-left: $contentGrid
    width: $contentGrid*7
    padding-right: $contentGrid
    display: inline-block
    h3
      +font-default(34px, 36px)
      color: $darkBlue
      position: relative
      &:before
        content: ''
        +sprite(-330px -35px, 40px, 39px)
        display: inline-block
        position: absolute
        left: -60px
        top: 4px

    h4
      +font-light(26px, 36px)
      color: $lightBlue
      font-size: 24px
  .capterra
    width: $contentGrid*3

  .references
    width: $contentGrid*10
    margin: auto
    padding: 100px 0
    +flex(space-between, flex-start)
    .reference
      width: calc(100% / 10 * 3)

      .person
        +flex(flex-start, center)
        .image
          width: 100px
          height: 100px
          border-radius: 9999px
          background-size: cover
          background-position: 50%
          margin-right: 20px

      .name
        p
          +font-light()
          font-size: 14px !important
          line-height: 18px !important
          margin: 0
          color: $lightBlue
          &.business
            +font-semi-bold()
            color: $darkBlue
      .description
        .name
          display: none
          p
            font-size: 16px !important
            line-height: 24px !important
        p
          +font-light(18px, 24px)
          font-size: 16px
          line-height: 22px
          color: $lightBlue
        .read-more
          color: $darkBlue
          &:after
            content: ''
            margin-left: 5px
            display: inline-block
            +arrowBlue
            +translate3d(0, 0, 0)
            +transition(all 0.3s)

      &:hover
        .description
          .read-more:after
            +translate3d(5px, 0, 0)

+media-query(1050px)
  .reference-row
    .content-container
      display: block
      .title
        margin-left: $contentGrid*2
        width: $contentGrid*8
        padding-right: 0
      .capterra
        width: $contentGrid*8
        margin-left: calc(#{$contentGrid} * 2 - 62px)
        margin-top: 25px
    .references
      +flex-wrap(wrap)
      +flex-direction(row)
      +flex-flow(row wrap)
      .reference
        width: 80%
        max-width: 550px
        margin: 0 auto 40px

        a
          +flex(space-between, flex-start)

        .person
          margin-right: 40px
          .name
            display: none

        .description
          .name
            display: block

+media-query(850px)
  .reference-row
    .references
      .reference
        width: 100%

+media-query(525px)
  .reference-row
    .references
      .reference
        a
          +flex-wrap(wrap)
          +flex-direction(row)
          +flex-flow(row wrap)

        .description
          text-align: center
          max-width: 350px
          margin: auto
          .name
            display: none
        .person
          width: 100%
          margin-right: 0
          +flex-wrap(wrap)
          +flex-direction(row)
          +flex-flow(row wrap)
          .name
            margin-top: 25px
            width: 100%
            display: block
            text-align: center
          .image
            width: 150px
            margin: auto
            height: 150px