Михаил Р.

Я не знаю с какой стороны уже подступиться и как делать такой эффект. Я пробовал вешать position: sticky на блок и определять высоту родительского блока. Но это работает при медленном скролле, при быстром блок пролетает не успевая закончить слайдер.

JS, если грубо описать последовательность действий, то:
- Получаем контейнер со скроллом.
- Создаем переменную со значением скролла контейнера.
- Слушаем скролл контейнера, при изменение скролла - пишем значение в переменную.
- Каждому элементу контейнера, которому необходимо "двигаться" при изменения скролла контейнера - прокидываем callback, который будет выполняться, если переменная со значением скролла контейнера изменилась.
- Callback отправляет каждый элемент с "движением" из этого контейнера, который уже самостоятельно определяет, как он будет реагировать на каждое изменение переменной.

Если Вы не готовы тратить время на велосипедо-строение и его поддержку, то лучше использовать чужое велосипедо-строение:
https://greensock.com/scrolltrigger
https://locomotivemtl.github.io/locomotive-scroll/

1. Hover на всего родителя > все дети чёрного цвета.
2. Hover на ребёнка и он оранжевого цвета, за счёт специфичности он перебьет п1.

Нужно верстать их снова и дублировать стили, или же я могу просто копировать уже свёрстанные блоки

но тогда будут разные названия классов и уже получиться не по БЭМ

При это БЭМ наоборот намекает - использовать повторно повторяющиеся блоки...

но тогда будут разные названия классов

Можно сделать так:

.price.price--one .price-card .price-card__name
.price.price--two .price-card .price-card__name

Повторяющийся блок:
.price-card .price-card__name
Дополнительная стилизация "повторяющегося блока".
.price.price--one .price-card .price-card__name

UPD:
Обратите внимание на ответ zkrvndm

Ты можешь использовать iframe для отображения одного и того же блока на множестве страниц.

Для конкретно Вашей задачи я таким бы не занимался (БЭМ это итак решает), а вот для SEO (органического продвижения) фреймы будут очень кстати, они позволят избежать склейки страниц в выдаче.

грид автоматически создаст одну колонку и 6 рядов

Если указан только display:grid - то да (ряды равны количество дочерних элементов).
Для изменения количества рядов - https://developer.mozilla.org/en-US/docs/Web/CSS/g...
Для изменения количества колонок - https://developer.mozilla.org/en-US/docs/Web/CSS/g...

Как организовать и где хранить это все

Git?

Засунуть это все в сборку gulp думаю глупо так как будет храниться куча файлов которые мы не используем и потом это все еще придется отдать 3 лицам

Если будет использоваться сборщик, то все "не используемое" можно не класть в итоговую сборку.

Скопилось куча кусочков кода по верстке к примеру 20 карточек товара или 15 видов 404 страницы и прочего

У меня таких под 1000 блоков. Приватный гит лучше всего.

<div class="block">
  <div class="block__element block__element_red">Этот див должен быть красным</div>
  <div class="block__element block__element_green">а этот зелёным</div>
  <div class="block__element block__element_blue">этот синим</div>
</div>

// если будут более сложные модификаторы
<div class="block">
  <div class="block__element block__element_color block__element_color_red">Этот див должен быть красным</div>
  <div class="block__element block__element_color block__element_color_green">а этот зелёным</div>
  <div class="block__element block__element_color block__element_color_blue">этот синим</div>
</div>

SCSS:

.block {
  &__element {
    &_color {
      &_red {
        color: red;
      }
    }
  }
}

если bootstrap ее ограничивает

Только по Вашему желанию...

видимо бутстрап такого не предусматривает

Предусматривает...

Могу предположить, что Вы использовали класс container, а он в свою очередь ограничивает ширину содержимого. Что бы такого не было, нужно использовать класс container-fluid.
Давно не работал с Bootstrap, но на память, вроде так:

<div class="container"> <!-- max-width: 1200px -->
	<div class="row">content</div>
</div>

<div class="container-fluid"> <!-- max-width: 100% -->
	<div class="row">content</div>
</div>