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

Saipy, А вы точно знаете сколько будет текста? А вы точно знаете, что у пользователя не стоит увеличенный шрифт или не задан минимальный больше, чем указан верстальщиком? Вы уверены, что при адаптиве пропорции останутся такими же? И т.д.

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

Даже интересно как вы будете это делать на флексе при неизвестной высоте блоков и доп оберток.

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

Так и сверстать: две колонки, два столбца.
Что именно вы делали и что не получилось?

Поможет https://cssgridgarden.com/#ru

Как лучше сделать такой блок на сайте?

szQocks, много лайков

Как изменить цвет открытого блока faq?

.li-question.opened {фон красный}

Как изменить фон блока и картинку одного элемента при свойстве :focus в css?

Нужно понимать 2,5 основные вещи:
1. В фокус могут попасть только интерактивные элементы. Нажатие и фокус это разные вещи. (Можно, конечно, добавить tabindex, но хорошо бы помнить о семантике и функциональности исходных тегов)
2. Как работают селекторы в CSS. В частности, почитать про дочерние, контекстные и соседние селекторы.
https://htmlbook.ru/samcss/kontekstnye-selektory

Возможно, вам понравится тег details

Как лучше сделать такой блок на сайте?

szQocks, значит, пора переходить к nav.
Да, спека разрешает засовывать в nav любые ссылки. Но в ней же написано, что мы поможем пользователям с ограниченными возможностями, если будем оборачивать в nav только основные блоки навигации. И именно так принято в сообществе.

В примере автора этого вопроса, меню это всё таки основная навигация и её нельзя безболезненно выкинуть со страницы и считать, что всё норм. Т.е. aside не очень подходит.

останусь при своём мнении, раз не можем найти компромисс

Тут я никак не возражаю, да и компромисс нам не нужен :) Семантика позволяет интерпретировать блоки по-разному.
Только хочу, чтобы автор вопроса и другие интересующиеся подходили к вопросу осознанно, понимая что и для чего пишут.

Как лучше сделать такой блок на сайте?

szQocks, могу даже перевести

Элемент «aside» представляет собой раздел страницы, состоящий из содержимого, которое косвенно связано с содержимым вокруг элемента «aside», и которое можно считать отдельным от этого содержимого.

Лого и основная навигация напрямую связаны содержимым.

Развернуто: то, что находится в aside можно выкинуть со страницы и основной смысл, по большому счету, не потеряется.

Загуглите основные ошибки использования aside. И, наверное, первая из них будет о попытке сложить навигацию, особенно, если она в левом столбце в aside.

Как лучше сделать такой блок на сайте?

szQocks, в aside складывают блоки, напрямую не связанные с содержимым сайта. Рекламные баннеры и подобное.
Лого и nav (т.е. основную навигацию) никак нельзя назвать несвязанными с основным содержимым.

Как лучше сделать такой блок на сайте?

Лого, нав принципиально не могут быть в aside.

Не силён в JS, как реализовать группу из input type="radio"?

Даниил Архипов, да, именно так.

Что можно сделать:
Засунуть инпут внутрь лейблов, тогда можно обойтись без id.
К элементам обращаться по классам или data-атрибутам.
Чтобы не пересекались name, можно обернуть в разные формы (малость изврат).

Либо заменить инпуты на кнопки и писать логику на js.

Не силён в JS, как реализовать группу из input type="radio"?

Начните с того, что id не может повторяться в рамках страницы.
А дальше уже всё остальные вопросы после решения этого.

Как правильно организовать реквесты фронта с бэком?

Семантика очень мало зависит от того, что вы потом будете делать на js.
Это выбор тегов по смыслу в первую очередь для того, чтобы люди с ограниченными возможностями могли пользоваться сайтом (скринридеры, работа только с клавиатуры и т.д.).

С помощью чего и как можно сверстать такую секцию?

Дарья, взять SVG прямо из макета, зачем их верстать руками?

Как расположить карточки?

sw213,

В моём понимании, выход один - увеличить ширину карточек

Да, гриды и minmax обычно дает хороший результат.

ну я это понимаю, но хочется, что бы карточки весли себя как при спейс-битвин, если их 4, если меньше, то как старт (justify-content)

Вы хорошо понимаете, что колонки не совпадут? Привет геометрии.

А так, nth-child в помощь
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Как расположить карточки?

Вопрос точно про верстку?
Может про дизайн?

Либо расскажите, а как должны себя вести карточки, если осталось свободное место? А потом запишите эти требования в css.

Как намек: размеры можно задавать в процентах или в единицах fr для гридов. И тому подобные мысли.

Как лучше реализовать верстку?

OCCASS OCCASSOVICH, вы хорошо понимаете, что будет двойной скролл? Для прокрутки контента внутри слайда и для прокрутки страницы? Или вы собираетесь просто обрезать, что не влезло и черт с ним?

Почему адаптация под мобильное не получается?

Начните с придумывания того как оно должно выглядеть на мобилках.
Сейчас у вас контейнер имеет фиксированную ширину 1000px. Наверное, при уменьшении экрана и он должен уменьшаться. Т.е. это не width, а max-width.

Зачем-то вы ставите его в центр абсолютом. Зачем? Есть флексы и гриды.

И так далее и решаете с каждым из блоков.

Хорошо бы почитать про семантику. Для текстов использовать заголовки и параграфы, а для ссылок теги <a>, а не <button>

Как лучше реализовать верстку?

У меня проблема в том, что когда я уменьшаю высоту окна, контент блоков заходит друг на друга, то есть за пределы

Нарисуйте, а что с ним должно происходить?
Потом поговорим и о стилях.
Т.е. сначала нужно понимать, как это задумал дизайнер, а потом уже решать как делать вам.

А так, любые плагины типа fullpage. Swiper тоже поддерживает полноэкранный вариант.

Как сделать так, чтобы два flex блока сжимались одинаково?

Задать им одинаковый flex-basis. На самом деле не обязательно именно через basis, можно минимальной высотой или отступами.

Возможно, вам будет удобнее делать такие вещи гридами