Вадим

не подключили jquery или выполняете код раньше чем он подклдючился.

Ну либо в том же скрипте после добавления класса запускать нужный код, либо
https://learn.javascript.ru/mutation-observer

Как Вы собрались стилизовать пустое пространство? Тэг br отвечает за принудительный перенос строки.

По умолчанию средствами css такого можно добиться только с помощью writing-mode: vertical-lr и transform: rotate(-90deg)
Вариант этот так себе, поэтому лучше JS - на каждый перенос строки (он же не автоматический?) помещать весь предыдущий текст в отдельный элемент, и добавлять в блок выше, ну а там уже и делать особо ничего не надо. display:flex; flex-direction: column или просто создавать блочные элементы.

Если перенос всё же автоматический, то только вариант на css

По умолчанию саойство animation play state: pause, при наведении воспроизводите.

https://developer.mozilla.org/en-US/docs/Web/CSS/a...
https://stackoverflow.com/questions/5804444/how-to...

css.github.io/csso

pogugli.com/?384653 --> https://www.impressivewebs.com/animate-display-blo...

https://qna.habr.com/search?q=%D0%BA%D0%B0%D0%BA+%...

Правила сервиса

2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.

.arrow{
            position: absolute;
            left: 45px;
            top: 80px;
            transition: 0.4s filter ease-in-out;
            transform:none;
            &:hover{
               animation: arrow 3s linear infinite;
               filter: blur(0.8px);
            }
         }

ol {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: column;
}

Никогда не понимал, почему людям такое проще спросить, чем посмотреть на практике. Вы же так и сами лучше разберётесь, и время чужое не отнимите.

span 2 - указывает занять 2 строки относительно текущего положения. А не строго первые 2 строчки.
grid-row работает в зависимости от того, какое указано значение. Либо перемещает между строчками, либо расширяет на определённое количество строк, либо и то и то.

А ещё определитесь про что Вы спрашиваете. В вопросе всё про row, в примере кода про col и row.

Копать в сторону "адаптивная вёрстка". Материалов в интернете куча.
Например, можно начать отсюда https://developer.mozilla.org/ru/docs/Learn/CSS/CS...

И в чём у Вас возникла сложность?
Контент в main, у которого ограничена максимальная ширина и отцентрирован, например, с помощью margin: 0 auto.
По бокам картинка - например фон для body.

Цифры никак не пропихнуть. Регулярные выражения в css не поддерживаются.
Но можно выделить общий "паттерн" из названия класса id3-div1-mainText
[class^="id"] - атрибут класс начинается с id и
[class*="-div"] - атрибут класс содержит -div и
[class$="-mainText"] - атрибут класс заканчивается на -mainText

Итого:

[class^="id"][class*="-div"][class$="-mainText"] {
  color: red
}

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

Тут важно понимать, что такой class: id-lorem-div-ipsum-mainText тоже подойдёт под предложенный выше селектор.

Никогда такого не было, и вот опять...

Нашёл за 2 минуты через местный поиск:
https://qna.habr.com/q/751159

Правила сервиса

2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.

clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
https://www.cssportal.com/css-clip-path-generator/

я Вам больше скажу. Этого даже с помощью js сделать нельзя в input type number. Только в input type text.

document.querySelector('[data-tab="tab-1"]').classList.add('accordion__title-active');

[data-tab="tab-1"] - нет такого элемента. Скрипт падает с ошибкой.
document.querySelector('#tab-1') аналогично, #tab-1 - нет такого элемента.

Исправление этих ошибок приводит код в рабочее состояние.

Научитесь читать сообщения в консоле и отладке своего кода.
https://learn.javascript.ru/debugging-chrome

Вангую: потому что div не закрыли(или закрыли не там) от col-lg-8 col-md-12, где контент расположен.
Посмотрите итоговую разметку в инструментах разработчика.
Погода вложена в блок с контентом.

3 пути:
1) Если картинка png с прозрачностью, то можно при наведении задавать filter: drop-shadow
2) Если картинка обёрнута в див то можно задать диву такую же форму как и у картинки с помощью clip-path
3) Сама картинка должна быть svg, ну или svg такой же формы должна лежать под картинкой и при наведении на блок - менять цвет свг.