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

  .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
        +flex(space-between, flex-start)

        + li
          margin-top: 30px

        .list-icon
          display: block
          width: 24px
          height: 24px

          svg
            width: 100%
            max-height: 32px

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

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

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



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

      .button
        border: 2px solid $broosYellow
        border-radius: 25px
        background: transparent
        margin-right: column(1, 12)
        margin-left: 55px
        font-weight: semi-bold()

      .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

    +respond-to-width(425)
      .trigger
        .button
          margin-left: 0


  .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(90deg, $blackGradient3)

  .right-side
    vertical-align: top
    overflow: visible
    position: absolute
    right: 0
    top: 0
    width: column(6.5, 12)
    height: 100%

    &.grid-col
      padding: 0

    h4
      font-size: 0.65rem
      color: $lightBlue
      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
          height: auto

          p
            display: block
            width: calc(100% - 90px)
            margin: 0
            font-size: 1.1rem
            line-height: 1
            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

          .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%
              max-height: 15px
              transform-origin: center
              transform: rotate(270deg)

              .st0
                fill: $lightBlue
                transition: fill 0.4s

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

    .images
      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

        &.small
          display: none

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

  +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
      position: relative
      width: 100%
      height: auto

      .images
        position: relative
        height: auto

        >span
          display: none

        picture
          display: block