antanol

ну, если предположить, что кол-во областей с кругами будет масштабироваться, можно создать функцию detectAll, которая будет сама перебирать все wrap-ы, и вызывать им функцию detect:

function detectAll(container){
  let detectedItems = document.querySelectorAll(container);
  for (let item of detectedItems){
    detect(item.classList[1]);
  }
}
window.onload = function () {
  detectAll(".wrap");
  window.onresize = function () {
    detectAll(".wrap");
  };
};

Хотя моё "classList[1]" лучше заменить чем-то, ориентирующемся на имя класса. Типа, если содержит "js-", то вызвать
В этом случае ещё изменяется первая строка в detect:

function detect(className) {
  const parent = document.querySelector(`.${className}`);

Строки 11-19. Тут две проверки выполняют одно действие, т.е. можно написать вот так:

if ((prevItem.length == 0) || (prevItem < currItem)) {
      obj.push({ a: [item] });
    } else {
      obj[obj.length - 1].a.push(item);
    }

+ таким образом мы избавимся от лишней вложенности

Строка 29.
Тут избыточны true и false. Само по себе равенство вернёт эти ответы.
Т.е. вот две аналогичных переменных:
let even = ((countPenult - countLast) % 2 == 0);

и ваша

let even = ((countPenult - countLast) % 2 == 0 ? true : false);

Увидела кнопку pretty-print в консоли, всем спасибо

Потому что они у вас в одном потоке.

.slider{
    position: relative;
}

.text{
  position: absolute;
}

Выровнять текст относительно блока можно с помощью top, right, left, bottom (задаются только два параметра, горизонтальный и вертикальный)

Во-первых, почему вы используете вместо ссылки параграф?! Для ссылок используется тег <a>. Да, даже, если речь идёт о ссылке на кусок той же самой страницы. Вы дали параграфу нужные поведение и внешний вид, но ссылкой он от этого не стал, и вы никуда не перейдёте.

Во-вторых, для логотипов никто не задаёт стили. Из макета вырезается картинка и вставляется на сайт. Либо через <img>, либо через background раздела.

В-третьих, почему вы используете footer? Футер это подвал, а шапка сайта всё-таки обычно наверху. Вам нужен .

В-четвёртых, <div class="col"><div class="col"></div></div> эквивалентен <div class="col col"></div>, если мы говорим о правилах вложенности, и не сработает так, раз речь о бутстрапе. О вложенности бутстрапа можете почитать в официальной документации.

Так работает. Css не использовала, чисто бутстрап

<div class="container-fluid">
  <div class="container">
    <header class="line">
      <div class="row justify-content-md-center">
        <div class="col col-lg-2">
          <a class="westline">West Line</a>
        </div>
        <div class="col">
            <a href="#" class="main">Главная</a>
        </div>
        <div class="col">
            <a href="#" class="catalog">Каталог</a>
        </div>
        <div class="col">
            <a href="#" class="company">О компании</a>
        </div>
        <div class="col col-lg-2">
          <a href="#" class="zvonok">Заказать звонок</a>
        </div>
      </div>
    </header>
  </div>
</div>

А ещё лучше использовать песочницы вроде codepen.io и тестить там нерабочие куски, и их же кидать людям.
Например, вот по вашему примеру (и там же внизу рабочий результат показан):
https://codepen.io/antanol/pen/qBZWGXQ