iBird Rose

потому что & уже другой. делай так:

&:hover {
    .main__box-1 {}
}

либо сохраняй & в переменную

.main {
  $v: &;
  &:hover {
    #{$v}__box-1 {
      background: #000;
    }
  }
}

смотри callback функции плагина этого твоего range slider. там должно быть, что-то типа event "onChange".
вот потом и используй его, к примеру так:

$('#amount').on('onChange', function() {
        // здесь отправляешь на сервер
})

nav {
    font-size: 0;
}
.dropdown {
  font-size: 14px;
}

это популярная проблема, когда еще не было flex. гугли про решение проблем с inline-block
к примеру тут описано: https://habr.com/ru/post/189118/

классами никак. только вот эти scss переменные использовать

левый блок статичный. правая сторона слайдер.
при адаптации уменьшаешь слайды.
в конечном итоге оставляешь 2 блока шириной 50%, в котором уместишь все.
НО можешь пойти правильным путем и переделать так как сделали тот же днс и ситилинк. там структура совершенно другая.

ну раз там есть ссылки - у ссылок и убирай
nav a {text-decoration: none;}

это защита от Cross-Site Request Forgery https://cheatsheetseries.owasp.org/cheatsheets/Cro...
данный hash формируется на сессию. вот он и проверяется при клике, что клик сделан именно с сайта вк, а не подделан с другого сайта

https://ru.reactjs.org/docs/events.html#mouse-events

гугли "сниппеты google"
к примеру здесь описано https://seo.ru/blog/chto-takoe-snippet-i-kak-nastr...