Как сделать так, что бы при нажатии на tab фокус не пререходил на button?

За это отвечает атрибут tabindex.

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

Если мышкой нажать нельзя, то это disabled

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

godsplane,

Это сам по себе блок.
Заголовки есть внутри этого блока.

Обычно по ним можно понять о чем весь этот блок и дать ему название.
Либо это не один блок, а несколько, каждый со своим заголовком.
Либо это список каких-то блоков __list
Без контекста сложно.

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

Например есть блок который выглядит как просто текст на черном фоне.

Он что, просто текст без заголовка и смысла? У блока, в котором он лежит нет названия?

Со слайдерами аналогично, они же не просто так приляпаны на страницу, есть ведь контекст, что хотят показать этим слайдером. Фотки туров или событий или что-то ещё.

Не появляется второе модальное окно?

Дмитрий Ярощук, прямо в codepen видно, где изменился цвет

Как сделать кнопку-изображение с эффектом hover в html/css?

krl76, совсем прекрасный вариант:
черное сделать фоновым svg, а красное обычным фоновым цветом.

При наведении меняете цвет фона.

И все довольны.

Почему так отображается SVG?

Потому что градиенты не дружат с внешними спрайтами.

Не появляется второе модальное окно?

Рекомендую использовать редактор с подсветкой кода.
Тогда такие ошибки будут видны за километр.
Также можно пользоваться валидатором.
У вас так:
id=popupPaymentWrapper"
Надо так
id="popupPaymentWrapper"

Как выровнять текст с псевдоэлементом по центру контейнера?

Илья, Гридами, флексами..
И не забудьте добавить отступы, чтобы не прилипло к границам.

Как с помощью flex-ов расположить блоки таким образом?

Что-то фигня какая-то всё получается.

Логично.
Используйте гриды.

Как с помощью flex-ов расположить блоки таким образом?

Только фиксируя высоту или с доп обертками.

Т.е. сначала нужно понять семантику разметки и кто такие блоки 1, 2, 3 и 4.

Как подставить класс?

an, так и где удаление класса для всех кнопок?

$('. acc-btn').removeClass('active')

Как подставить класс?

an,

при нажатию добавляется класс, а по нажатию на следующую кнопку, с первой класс не удаляется

Да я ведь написала: сначала, при клике, убрать всем. Добавить только для this.

Если при повторном клике нужно закрывать, т.е. active не нужен, то значит, добавлять внутри проверки (сами проверки у вас уже написаны)

Как подставить класс?

an, $(this).addClass('active');
И не забывать сначала всем убирать.

Как подставить класс?

Так для $this и добавлять

Почему при изменении ширины экрана элементы наезжают друг на друга?

В этом частном случае поправить можно так

transform: rotate(-180deg) translate(100% 100%);
transform-origin: left top;

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

Есть ли бесплатный статический хостинг с загрузкой через браузер?

Никто не мешает загружать файлы на Гитхаб через браузер.

Интересует почему не работает space-between. в блоке card__inner?

Обведите card__inner рамочкой, всё сами поймете.

Интересует почему не работает space-between. в блоке card__inner?

jsfiddle не работает в России. Соответственно, если хотите от нас ответов, используйте другие песочницы, например, codepen.io

Как прижать кнопку к низу блока?

Карточке флекс колонками, кнопке margin-top: auto.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, мне не очень хочется смотреть видео.
Если его решение вас устраивает, возьмите и сделайте.

Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Genri_Rus, по-моему, вы пошли по кругу.

Вам нужно, чтобы пункты + отступы слева и справа были равны. Любым способом. Я уже рассказала разные. Выберите наиболее приятный и сделайте.

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

Кто от кого отличается?