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

Saipy, существует align-self для таких вещей

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

Saipy, попробуйте заглянуть в комментарии к вопросу..

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

Saipy, перестать рассказывать, что это можно сделать на флексах в рамках условий вопроса и реальности.

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

Saipy, это и есть доп обертки )))

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

Saipy,

Один родительский элемент и два дочерних

На скрине в вопросе нарисованы 3 дочерних элемента. Даже номера стоят.

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

Saipy, давайте теперь не в виде вопроса, а в виде утверждения: без фикс высоты или доп оберток вы на флексах не сделаете такую раскладку.

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

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 прямо из макета, зачем их верстать руками?