.cta-row
  position: relative
  background-color: $blue
  overflow: hidden

  .basic-hint
    color: white
    font-size: 0.8rem
    line-height: 1.2
    width: 100%
    max-width: 800px
    margin: 0 auto
    padding: 1rem 0

  .grid-row
    position: relative
    z-index: 2

    &:after
      content: ''
      position: absolute
      z-index: 1
      top: 0
      left: column(6, 12)
      width: 100vw
      height: 100%
      background: $lightBlue

    //&:before
    //  $gradientSize: 100px
    //  content: ''
    //  position: absolute
    //  top: 0
    //  right: calc(#{column(6, 12)} - #{$gradientSize})
    //  height: 100%
    //  width: $gradientSize
    //  background: linear-gradient(90deg, $blackGradient)

  .cta-trigger, .cta-trigger-2, .cta-person
    position: relative
    z-index: 3

  .cta-trigger, .cta-trigger-2
    display: inline-block
    padding: 65px 0

    h3
      color: white
      font-size: 1.4rem
      line-height: 1.4
      margin: 0 0 10px

    .cta-trigger__description
      color: rgba($whiteBlue, 0.75)
      font-size: 0.9rem
      padding-right: 80px
      max-width: 600px
      margin: auto

      +respond-to-width(1100)
        padding-right: 0

    //p
    //  color: rgba($whiteBlue, 0.75)
    //  font-size: 0.7rem
    //  margin: 0
    //  font-weight: 600
    //  text-transform: uppercase

    .button
      margin-top: 40px
      color: white
      text-transform: uppercase

  .cta-trigger
    margin-left: column(1, 12)
    width: column(5, 12)


  .cta-trigger-2
    width: column(6, 12)
    padding-left: 100px

  .cta-person
    display: inline-block
    width: column(6, 12)
    padding: 65px 0 65px 50px

    .wrapper
      +flex(flex-start, center)

    .image-placeholder
      width: 175px

      figure
        position: relative
        width: 100%
        padding-bottom: 100%
        height: 0

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

    .contact-info
      width: calc(100% - 175px)
      padding-left: 25px

      p
        margin: 0
        font-size: 1.4rem
        color: $purple
        font-weight: bold()

      span
        display: block
        color: $whiteBlue
        font-size: 0.8rem
        font-weight: 600
        text-transform: uppercase

      a
        display: block
        margin-top: 15px
        font-size: 0.9rem
        color: $blue
        font-weight: semibold()
        text-decoration: none
        transition: color 0.2s

        &:hover
          color: darken($blue, 15%)

      +respond-to-width(1300)
        p
          font-size: 1.2rem

        span
          font-size: 0.7rem

        a
          font-size: 0.8rem


  +respond-to-width(1100)
    .grid-row
      height: auto
      display: block
      width: 100%

      &:before, &:after
        display: none

    .cta-trigger, .cta-trigger-2, .cta-person
      width: 100%
      padding: 65px column(1, 14)

    .cta-trigger
      margin-left: 0
      text-align: center

    .cta-trigger-2, .cta-person
      background-color: $lightBlue

    .cta-person
      .wrapper
        max-width: 450px
        margin: auto

  +respond-to-width(475)
    .cta-trigger, .cta-trigger-2
      br
        display: none

    .cta-person
      padding: 40px column(1, 14)
      text-align: center

      .wrapper
        display: block

      .image-placeholder
        display: inline-block
        margin-bottom: 25px

      .contact-info
        padding-left: 0
        width: 100%