.reasons-row
  position: relative
  background-color: $darkGreen

  .grid-row
    position: relative

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

  .reasons-block
    overflow: visible
    padding-right: column(1, 24)

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

      li
        color: white
        font-size: 1.4rem
        font-weight: semi-bold()
        margin-bottom: 20px
        +flex(space-between, flex-start)

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

        +respond-to-width(480)
          font-size: 1rem

        .list-icon
          display: block
          width: 20px
          transform: rotate(0deg)
          transform-origin: 0 100%
          transition: transform 0.4s
          svg
            width: 100%

            &.thumb
              .st0
                fill: $orange

        p
          width: calc(100% - 55px)
          margin: 0

        &:hover
          .list-icon
            transform: rotate(-10deg)

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

      .button
        border: 2px solid white
        background: transparent
        margin-right: column(1, 12)

      .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


  .background
    position: absolute
    width: 100%
    height: 100%
    top: 0
    left: 0

    &:after
      content: ''
      position: absolute
      width: column(7, 12)
      height: 100%
      top: 0
      right: 0
      background: linear-gradient(270deg, $darkGreenGradient)

  .right-side
    vertical-align: top
    overflow: visible
    h4
      font-size: 0.65rem
      color: white
      opacity: 0.4
      font-weight: semi-bold()
      text-transform: uppercase
      margin-bottom: 30px

    .video-wrapper
      background-color: $black

    .news-block
      width: column(4, 5)

      +respond-to-width(1350)
        width: 100%

      .post
        background: none
        box-shadow: none
        border-bottom: 1px solid rgba(white, 0.25)

        a
          +flex(flex-start, center)
          text-decoration: none
          padding: 20px 0

          p
            display: block
            width: calc(100% - 90px)
            margin: 0
            font-size: 1.1rem
            color: white
            font-weight: semi-bold()
            opacity: 1
            transition: opacity 0.4s

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

          .date
            position: relative
            display: block
            font-size: 1.4rem
            width: 60px
            left: 0
            top: 0
            color: $orange

          .arrow
            position: relative
            display: block
            width: 12px
            margin-left: 25px
            transform: translate3d(0,0,0)
            transition: transform 0.4s

            .arrow-icon
              position: relative
              right: 3px
              width: 100%
              transform-origin: center
              transform: rotate(270deg)

              .st0
                fill: $orange
                transition: fill 0.4s

          &:hover
            p
              opacity: 0.5
            .arrow
              transform: translate3d(10px,0,0)


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

    .background
      display: none

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

    .right-side
      width: 100%
      margin-left: 0
      padding: 60px column(1, 12)
      background-color: $black