Чем заменить тег br?

Зачем вам нужно его заменять?
В теории, можно пооборачивать в span части строк и задать им блочность.

Как сверстать эту секцию?

Syrone, я не знаю, что происходит у вас макете при адаптиве или есть ли какая-то анимация у этой композиции.

А так, не вижу смысла разбивать её на несколько. С какой целью? Побольше оберток понаделать, да стилей понаписать?

Почему текст выезжает за блок и ему всё равно на ограничение?

RINCODE, показывайте на codepen.io

Почему текст выезжает за блок и ему всё равно на ограничение?

RINCODE,

Аааа у меня вообще не работают стиле ниже, диполей флекс и т.п. что делать

Очевидно проверять валидатором. Смотреть что там со скобками и прочим. Разметку тоже можно.

Почему текст выезжает за блок и ему всё равно на ограничение?

Потому что это стандартное поведение текста, если ему не заданы переносы или overflow.

Как убрать элемент на задний фон, чтобы он не лежал выше текста?

RINCODE, это один из вариантов

Как убрать элемент на задний фон, чтобы он не лежал выше текста?

RINCODE, если позволяет макет, то заменить на просто фон без псевдо и абсолюта. По куску вашего скрина это не определимо.

Как убрать элемент на задний фон, чтобы он не лежал выше текста?

- Прибить фоном, а не абсолютом
- Задать z-index-1
- Задать тексту z-index

Предварительно почитав про контекст наложения, например, тут css.yoksel.ru/kontekst-nalozheniya

Вопрос по семантике. Нужно ли р/чел оборачивать в abbr?

Запустите скринридер и послушайте как лучше.

Можно ли сократить повторяющийся css без доп класса?

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

Да и главное, чтобы спрашивающий или другие читатели не приняли за чистую монету.

Как сверстать эту секцию?

Syrone, достаточно одной картинки. Зачем вам несколько? Они затейливо ведут себя при адаптиве?

Ссылка на главную страницу сайта не создает сниппета в месенджерах и соцках?

Valentine5, валидатор в помощь

Ссылка на главную страницу сайта не создает сниппета в месенджерах и соцках?

Valentine5, правильно: так не делать. По-хорошему, открывающий и закрывающий теги должны быть в одном файле.

Но если нет общего файла, то придется так.

не должно быть несколько?

Нет. Он может быть только один на странице.

Автоматическая сетка на grid по условию?

greencost, можно сделать грид в один столбец.
Первые два элемента запихать в одну клетку и задать ширину с выравниванием.

Ссылка на главную страницу сайта не создает сниппета в месенджерах и соцках?

Попробуйте заглянуть в собственный код

spoiler

Можно ли сократить повторяющийся css без доп класса?

HardBot, код скомпилируется ровно в то, что и было и никакого сокращения не будет.
Собственно в этом варианте и миксин ничего особо не сокращает.

Не могу установить модульный зависимости. При команде npm i выдает ошибку. Выручите?

Поскольку неизвестно, что там вообще происходит, я бы начала с русских букв и пробелов в пути

Можно ли сократить повторяющийся css без доп класса?

HardBot, ну и во что оно скомпилируется?

Как называются такие эффекты?

Максим Тимофеев, человеку было нужно слово. Scroll анимация была написана выше, я лишь предложила ещё вариант.

Как создать кнопку и рядом картинку?

<a class="btn" href="">Get started</a>

.btn {
 background: ваша стрелка в нужном месте
}

Альтернатива: псевдоэлемент со стрелкой.

Но стрелка это не img.

Как называются такие эффекты?

Параллакс?