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

  .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(7, 12)} - #{$gradientSize})
      width: $gradientSize
      height: 100%
      background: linear-gradient(90deg, $blackGradient)



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

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

    >h2
      font-size: 1.6rem
      line-height: 1.2
      //font-weight: bold()
      font-weight: light()
      color: white
      margin: 0 0 45px

      +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: white

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

          +respond-to-width(1600)
            margin-top: 6px
            strong
              font-size: 1rem

          +respond-to-width(1080)
            margin-top: 8px

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

      &.check
        li
          .list-icon
            position: relative
            top: -1px
            display: block

            &:before
              content: ''
              display: block
              width: 22px
              height: 22px
              background:
                image: url("/img/checkMarker.svg")
                position: center
                size: contain
                repeat: no-repeat

      &.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 $brightBlue
            border-right: 3px solid $brightBlue


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

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

        .arrow
          margin-left: 40px
          fill: white

      .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(1000)

    .grid-row
      width: 100%

      &:before, &:after
        display: none

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

    .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

        span
          display: none

        picture
          display: block