.methods-row
  background-color: $navyBlue
  padding-top: 100px
  .methods-wrapper
    width: 7 * $contentGrid
    margin: auto
    position: relative

    .methods-select
      width: calc((100% / 7 * 2.5) - 1px)
      border-right: 1px solid white
      h2
        color: white
        +font-semi-bold(24px)
        margin-bottom: 80px

      ol
        padding: 0
        list-style: none
        counter-reset: method-counter
        li
          +font-bold(20px, 34px)
          color: white
          position: relative
          padding-left: 20px
          cursor: pointer
          +transition(all 0.3s)
          &:hover
            color: $gradient1


          &.active
            color: $gradient2
            &:before
              content: ''
              +arrowPink
              display: inline-block
              margin-top: 12px
              padding-right: 0

          &:before
            position: absolute
            left: 0
            content: counter(method-counter)'.'
            counter-increment: method-counter
            padding-right: 30px
    .methods
      width: calc(100% / 7 * 4)
      counter-reset: method-counter
      position: absolute
      right: 0
      top: 0
      .method
        position: absolute
        width: 100%
        top: 0
        right: 0
        opacity: 0
        +translate3d(0, 40px, 0)
        +transition(all 0.3s)
        pointer-events: none
        &.active
          opacity: 1
          z-index: 2
          +translate3d(0, 0, 0)
          pointer-events: all

        h3
          color: white
          +font-semi-bold(24px)
          margin-bottom: 80px
          &:before
            content: counter(method-counter)'.'
            counter-increment: method-counter
            padding-right: 8px

        .content
          p, span
            +font-default(18px , 26px)
            color: white

        .next
          +font-semi-bold(20px)
          color: $gradient2
          cursor: pointer

          &:after
            content: ''
            +arrowPink
            margin-left: 15px
            display: inline-block
            +translate3d(0,0,0)
            +transition(all 0.3s)
          &:hover
            &:after
              +translate3d(5px, 0, 0)
        &:last-child
          .next
            display: none

    .gradient
      margin-top: 70px
      height: 30px
      +linear-gradient(left,  $gradient1 0%, $gradient2 100%)

+media-query(1450px)
  .methods-row
    .methods-wrapper
      width: 9 * $contentGrid
      .methods-select
        padding-right: 10px

+media-query(940px)
  .methods-row
    .content-container
      width: 100%

+media-query(940px)
  .methods-row
    .methods-wrapper
      .methods
        .method
          .next
            +font-semi-bold(24px)
          .content
            p, span
              +font-default(21px, 32px)

+media-query(740px)
  .methods-row
    .methods-wrapper
      width: 10 * $contentGrid

+media-query(500px)
  .methods-row
    .methods-wrapper
      .methods-select
        width: 100%
        border-right: none
        border-bottom: 1px solid white
        padding-bottom: 40px
        height: auto !important
        margin-bottom: 40px
      .methods
        position: relative
        width: 100%
        .method
          .content
            p, span
              +font-default(21px , 32px)