.reference-other-relative-models-binder
  position: relative
  z-index: 4
  background-color: white
  .grid-row
    position: relative
    &:before
      content: ''
      top: 0
      left: 0
      position: absolute
      display: block
      width: column(3, 12)
      height: 100%
      border-right: 1px solid rgba($lightGrey, 0.2)

      +respond-to-width(1450)
        width: column(2, 12)

      +respond-to-width(1000)
        display: none

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

      &:before
        display: none

.reference-offer-cta-row
  position: relative
  z-index: 2
  padding: calc(100vw / 12) 0

  +respond-to-width-beyond(1440)
    padding: 120px 0

  .reference, .offer-cta
    display: inline-block
    vertical-align: top

  .reference
    width: column(5, 12)
    margin-left: column(1, 12)
    &.reference
      &--disabled
        display: none

    .reference-description
      position: relative
      background-color: $lightBrown
      border-radius: 10px
      padding: 40px 60px

      p
        margin: 0
        font-size: 1.1rem
        line-height: 1.2
        color: white
        font-weight: medium()
        font-style: italic

      &:before, &:after
        content: ''
        position: absolute
        display: inline-block

      &:before
        top: 0
        left: -35px
        +sprite(310px 87px, 23px, 16px)

      &:after
        bottom: 0
        right: -35px
        +sprite(310px 105px, 23px, 16px)

    .person
      +flex(space-between, flex-start)
      margin-top: 30px
      padding-left: calc(#{ column(2, 5) } - 35px)

      figure
        position: relative
        width: 70px
        height: 70px
        border-radius: 100%
        background-color: $lightestGrey

        span
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          border-radius: 100%
          background:
            size: cover
            position: center

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

        p
          margin: 0
          font-size: 0.8rem
          line-height: 1.4
          color: rgba($lightBrown, 0.5)
          font-weight: semibold()

          strong
            display: block
            color: $lightBrown

        .linkedin
          display: block
          margin-top: 10px
          +sprite(442px 24px, 20px, 20px)
          opacity: 1
          transition: opacity 0.3s

          &:hover
            opacity: 0.6


  .offer-cta
    position: relative
    top: -7px
    margin-left: column(2, 12)
    width: column(4, 12)

    &.offer-cta
      &--no-reference
        margin-left: column(8, 12)

    &:before
      content: ''
      position: absolute
      left: -40px
      top: 6px
      display: inline-block
      +sprite(467px 129px, 23px, 29px)

    p
      margin: 0
      font-size: 0.9rem
      line-height: 1.4
      font-weight: medium()
      color: $lightBrown

      a
        color: $lightBrown
        text-decoration: none
        transition: color 0.2s

        &:hover
          color: $brown

      strong
        display: block
        font-weight: semibold()
        color: $brown

    .button
      margin-top: 50px
      color: $darkBrown
      .arrow
        +sprite(470px 1px, 19px, 13px)

      &:hover
        border-color: $darkBrown

  +respond-to-width(1450)
    .offer-cta
      &.offer-cta
        &--no-reference
          margin-left: column(6, 12)

    .reference
      margin-left: 0
      width: 50%

      .person
        padding-left: calc(#{ column(2, 6) } - 35px)

  +respond-to-width(1000)
    text-align: center

    .reference
      text-align: left
      width: 100%
      padding: 0 40px
      padding-bottom: 40px
      border-bottom: 1px solid rgba($lightGrey, 0.2)
      margin-bottom: 40px

      .person
        padding-left: 60px

    .offer-cta
      top: 0
      display: block
      margin-left: auto
      width: calc(100% - 180px)
      text-align: left

      &.offer-cta
        &--no-reference
          margin-left: auto


  +respond-to-width(700)
    padding: 80px 0

    .reference
      padding: 0 40px 40px

      .reference-description
        padding: 30px 40px

        &:before
          left: -31px

        &:after
          right: -31px


      .person
        display: block
        padding-left: 40px

        figure
          margin-bottom: 10px

        .content
          width: 100%
          p
            font-size: 0.9rem

    .offer-cta
      width: calc(100% - 160px)

  +respond-to-width(500)
    .reference
      .person
        padding-left: 0

    .offer-cta
      width: 100%
      padding: 0 40px

      &:before
        position: relative
        left: 0
        top: 5px
        display: inline-block
        vertical-align: top

      >p
        display: inline-block
        width: calc( 100% - 29px)
        padding-left: 25px

      .button
        margin-top: 30px