.reasons-row
  position: relative
  overflow: hidden
  background-color: $purple

  .vertical-swoosh
    position: absolute
    left: 0
    top: -1%
    width: 15%
    height: 102%
    background:
      image: url("/img/styling/verticalSwoosh.svg")
      position: 0 50%
      repeat: no-repeat
      size: auto 100%

    +respond-to-width(1940)
      background-position: 100% 50%

    +respond-to-width(1780)
      width: 13%


  .grid-row
    position: relative

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

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

  .grid-col
    vertical-align: middle
    padding: 100px 0

    +respond-to-width(1780)
      padding: 60px 0

  .reasons-block
    position: relative
    z-index: 2
    overflow: visible
    padding-right: column(1, 24)

    h2
      font-size: 1.4rem
      line-height: 1.2
      font-weight: bold()
      color: white
      margin: 0 0 45px
      //padding-left: 55px

      //+respond-to-width(1250)
      //  padding-left: 0

    ul
      list-style: none
      margin: 0
      padding: 0

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

        + li
          margin-top: 30px

        .list-icon
          display: none

        //svg
        //  width: 100%
        //  max-height: 32px

        p
          width: calc(100% - 55px)
          margin: 0
          font-size: 0.8rem
          line-height: 1.2
          color: rgba(white, 0.8)

          strong
            font-size: 1rem
            line-height: 1.6
            display: block
            margin-bottom: 3px
            color: white
            font-weight: 600

          +respond-to-width(1600)
            strong
              font-size: 0.9rem

      &.thumbs
        li
          .list-icon
            display: block
            margin-top: 3px
            width: 20px
            height: 18px
            svg
              width: 100%
              max-height: 18px

      &.arrows
        li
          .list-icon
            display: block
            margin-top: 7px
            width: 12px
            height: 12px
            transform: rotate(45deg)
            transform-origin: 0 100%
            transition: transform 0.4s

            border-top: 3px solid $semiLightBlue
            border-right: 3px solid $semiLightBlue

      &.numbers
        li
          .list-icon
            position: relative
            top: 3px
            display: block
            font-size: 1rem
            line-height: 1.2
            color: rgba(white, 0.5)
            font-weight: 700

            +respond-to-width(1600)
              font-size: 0.9rem
              top: 2px


    .trigger
      +flex(flex-start, center)
      margin-top: 60px
      margin-left: 55px

      .button
        color: white
        margin-right: column(1, 12)
        text-transform: uppercase

        .arrow
          margin-left: 40px

      .image-placeholder
        width: 180px

        +respond-to-width(1600)
          width: 150px

        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

    +respond-to-width(1400)
      .trigger
        display: block

        .button
          margin-right: 0

        .image-placeholder
          display: none


  .right-side
    position: relative
    z-index: 2
    padding: 0

    &.col-7
      padding-left: column(1, 12)

    &.absolute
      position: absolute
      right: 0
      top: 0
      height: 100%

    h4
      font-size: 0.65rem
      color: $brightBlue
      font-weight: semibold()
      text-transform: uppercase
      margin: 0 0 20px

    .video-block
      padding: 80px 0

      .video-wrapper
        background-color: darken($black, 5%)

        width: 100%
        max-width: 960px

        .placeholder
          position: relative
          padding-bottom: 52.8%
          padding-top: 25px
          height: 0
          iframe
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%

    .image-block
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      span
        position: absolute
        width: 100%
        height: 100%
        top: 0
        left: 0
        background-size: cover
        background-position: center

      picture
        display: none
        width: 100%
        margin: 0
        img
          width: 100%

  +respond-to-width(1200)

    .vertical-swoosh
      display: none

    .grid-row
      width: 100%

      &:before, &:after
        display: none

    .reasons-block
      display: block
      width: 100%
      padding: 60px column(1, 14) 60px 33%
      margin: auto

      background:
        image: url("/img/styling/verticalSwoosh.svg")
        position: -1% 50%
        repeat: no-repeat
        size: auto 101%

      +respond-to-width(860)
        padding: 35px 20px 35px 33%
        background-position: -10% 50%

        ul
          li + li
            margin-top: 18px

      +respond-to-width(600)
        background: none
        padding: 60px 40px

        ul
          li + li
            margin-top: 25px

        +respond-to-width(420)
          padding: 40px 20px

          h2
            br
              display: none




    .right-side
      background-color: darken($black, 5%)
      position: relative
      width: 100%
      padding: 0 column(1, 14)
      height: auto

      &.col-7
        padding-left: column(1, 14)

      &.absolute
        position: relative
        height: auto
        padding: 0

      .image-block
        position: relative
        height: 0
        padding-bottom: 66.7%

        span
          background-position: 50% 20%

        +respond-to-width(650)
          height: auto
          padding-bottom: 0

          span
            display: none


          picture
            display: block