Roman Serdyuk

Мне кажется, вы указываете путь не относительно css-файла, а относительно документа.

Лично я использую gulp-file-include - он позволяет внешне задавать переменные (даже отдельным файлом json) инклюдить любой файл (например svg) в любой файл.

Это может быть банально из-за невозможности отобразить данный шрифт или кодировки текста. Уточните свой вопрос, пожалуйста.

То что вы пытаетесь сделать - достаточно сложно. Это одновременно и псевдоэлемент со счётчиком, и буквица.
Вот, набросал для вас приблезительный пример.

Используйте псевдокласс :focus-visible вместо :focus.
И рекомендую, всё-таки чтобы состояния ховера и фокуса чем-то отличались.

Используйте для этого Github Pages. А лучше песочницы типа Codepen или JSfiddle.

Для CMS это не имеет значения. Содержимое хлебных крошек гененрируется на сервере.

выдает очень странную ошибку в консоли

А где текст ошибки-то? И да, jQuery нужно подключать до слика, а не после, как у вас.

В CSS нет возможности обратиться к родительскому элементу из дочернего. То есть блоку .col совершенно плевать, есть в нём .btn или нет. Это можно сделать с помощью javascript/jQuery.
Самый простой вариант - обратиться с помощью .parent() в jQuery либо .parentNode в ванильке.

Как вариант, для .main-img задать псевдоэлемент и спозиционировать его абсолютно.

Потому что кнопка, помещённая внутрь формы имеет по умолчанию тип submit, что выполняет событие submit формы, соответственно и перезагружает страницу.
Чтобы это исправить следует кнопкам внутри формы написать <button type=button>

Вот тут сборка: https://github.com/budfy/Easy-webdev-startpack
Постоянно обновляется и дополняется разными плагинами.