Ankhena

Потому что кто-то задал макс ширину 100% глобально для div и p

div, p {
    max-width: 100%; 
}

Уберите или переопределите

я понимаю что есть более правильный подход но не могу найти

Как вариант:

1. Вешаем слушатель событий на документ или родителя этих табов
2. Всем табам даем одинаковый класс
3. Проверяем попал ли таргет на таб
4. Всем убираем класс open
5. Тому, который в таргете задаем его

const CLASS_TAB = 'tab';
const CLASS_OPEN = 'open';

const block = document.querySelector('.block'); // родительский блок табов
const tabs = block.querySelectorAll(`.${CLASS_TAB}`);

block.addEventListener('click', ({target}) => {
  const tab = target.closest(`.${CLASS_TAB}`);
  if (tab) {
    tabs.forEach((item) => {
      item.classList.remove(CLASS_OPEN);
    });
    tab.classList.add(CLASS_OPEN);
  }
});

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

На что-то такое

if (tab) tabs.forEach(t => t.classList.toggle('open', t === tab));

Когда дойдёте до задачи, когда нужно менять класс не самой кнопке-табу, а соответствующему блоку с контентом, то:
- Почитайте про DOM дерево, поиск родителей, соседей и т.д.
- Так же рекомендую использовать data-атрибуты для связи элементов.

Так, на коленке, но с адаптивом.
Плохо, что вы не потрудились сделать хотя бы начальную песочницу с нужными шрифтами и размерами.
Возможно, при исходном шрифте удастся избежать части костылей с переносами.

https://codepen.io/AnnaSummer/pen/yyBrwyz

Альтернативный вариант с использованием mix-blend-mode, но нужно подбирать цвета и эффекты

https://codepen.io/AnnaSummer/pen/LEPoRLZ

Открыть вкладку Event Listeners и посмотреть.

Обратите внимание на галочку Ancestors - она покажет или скроет родительские события.

Вообще в одну строчку

[...document.querySelectorAll('input[type="checkbox"]')].forEach(item => item.checked = true);

Либо перечисляете классы через запятую

querySelectorAll('.myCheckBox1, .myCheckBox2, .myCheckBox3')

Пишите анимации через запятую.
Либо анимируйте разные обертки.

При такой структуре разметки вам не нужен для этого JS.

Поменяйте id="info_block" на class="info_block" и добавьте css

.info_block {
  disply: none;
}
.open_link:hover + .info_block {
  disply: block
}

Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.

Проявить смекалку и делать тень не тенью, а градиентом

Потому что кто-то написал в вашем коде это:

@media (max-width: 900px)
.wrap-catalog-cake, .wrap-catalog-pie, .wrap-catalog-mini-cake, .wrap-catalog-gift {
    grid-area: 1/1/2/4;
}

И оно перекрывает всё что под ним.

Зачем это вообще делать на js?
https://codepen.io/AnnaSummer/pen/xxYygyK
Адаптируйте появление и поведение под себя.

Ваш span на самом деле должен быть label.

Может, вам поможет обычный css и селектор типа

:nth-child(3):last-child {
  тут стили, если третий является последним
}

https://codepen.io/search/pens?q=hover и т.д.

Позиционируйте кнопку абсолютом (или гридом) в правый нижний угол. Псевдоэлементом перед ней добавьте многоточие.
Фоном задайте фон блока.
Следите за тем, чтобы ширина блока была больше, чем кнопка + многоточие + симпатичное расстояние, чтобы всё это не выглядело по-уродски.

Пример переключалки темной-светлой темы
https://codepen.io/AnnaSummer/pen/oNEoeqY

https://codepen.io/AnnaSummer/pen/abqyWGa

Потому что название класса просто class без точки.

Slick - устарел.
Он не поддерживает флекс для слайдов.
А это значит, что внутри слайда нужно сделать обертку и задать ей flex.

Если открыть инструменты разработчика, то можно увидеть display у кадров. (И много чего ещё полезного)

Альтернатива: перестать оборачивать картинки в 4 в один слайд, а сделать каждую отдельным слайдом и сказать, что нужно выводить по 4 за раз.

Не для всех браузеров