Как при большем количестве контента уменьшать картинку?

Jack, по ширине получилось бы, по высоте ничего не мешает выпадать.

Как заполнить контейнер элементами на всю ширину?

Если это

не прибегая к стилизации самого элемента

только потому что

Элементов в последней строке может быть другое количество

То есть это:
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Как при большем количестве контента уменьшать картинку?

Jack,

к сожалению я не учил гриды

Значит, как раз пришла пора

Как при большем количестве контента уменьшать картинку?

Использовать гриды, оставляя для картинки 1fr. Тексту min-content.

Зачем вам для

.card {
  display: flex;
  flex-direction: column;

Когда блочные элементы сами друг под другом встают - вот это загадка.
Вы же не используете возможности флектов.

Родитель с position relative обрезает список с position absolute, как исправить?

Артем Прохоров,

Пожалуйста, сделал overflow: hidden.

Откройте, пожалуйста, любой справочник и посмотрите что делает overflow с различными значениями.
Вы сказали скрыть всё, что не влезает - браузер скрыл.
Перестанете так делать и он не будет скрывать.

Родитель с position relative обрезает список с position absolute, как исправить?

Артем Прохоров, вы же сами этому div задали overflow? Или злые демоны?

Но начать нужно с разметки, откуда там вообще таблица и вся остальная каша?

Такое ощущение, что вы взяли учебник 2000 года.

Как сверстать фон на этом макете?

SVG + градиенты.
Либо clip-path.
Только не забудьте о том, что экран может быть любой ширины и фон должен растянуться.
Можно в псевдо его сложить.

Как сделать затемнение фона в тот момент когда будет вываливаться меню?

Olga17527, сдвиньте тень вниз на её же размер. Только предварительно изучите единицы vw и vh.
Или замените на псевдо и позиционируйте как хотите.

Как решить проблему с max-height и flex-column?

И где скролл при переполнении?
Вы не промахнулись вопросом?

Как решить проблему с max-height и flex-column?

David Halkin, а вы точно смотрите его в свойстве grid-template-rows? А ещё лучше в реальном сафари?

Как решить проблему с max-height и flex-column?

David Halkin,

но не везде поддерживается "min-content"

Где не везде он не поддерживается, там где в принципе поддерживаются гриды?

при удалении "header" , "content" должен заполнять остаток пространства макс-хейта.

Ох, как я люблю эти выплывающие из ниоткуда дополнения. Когда вы писали вопрос, были не в курсе об этом обстоятельстве? Какие ещё условия?

Задайте второму блоку grid-row: span 2;

https://jsfiddle.net/6k70cj8o/

Как правильно перенести слова и вписать картинку?

Владислав Запорожченко, расскажите, что пользователь потеряет, если не увидит эту тетку? Она несёт какую-то смысловую нагрузку, без которой затруднится восприятие текстовой информации?

Как правильно перенести слова и вписать картинку?

Не банальным < br > же это делается!?

Почему нет? Если шириной не получается решить, то да, br.
Альтернатива - неразрывные пробелы. Но их ставят только там, где они нужны по нормам типографики.

2. Как корректно внедрить в разметку картинку лампочки?

Псевдоэлементом. Не нужно её внедрять в разметку.

И тетку тоже.
Это либо псевдоэлемент либо, если совсем никак, то img с aria-hidden true.

3. Оценить в целом "правильность" моего видения структуры данного блока, исходя из кода ниже.

Да, такая разметка допустима.

Кроссбраузерность верстки на устройствах 2014 года должна ли быть в 2022 году?

Виктория, если ваш клиент прислал вам такие скрины, значит, это актуально.
Но по-хорошему, поддерживаемые версии (и возможные отклонения на старых браузерах/устройствах) оговариваются до начала работ.

Кроссбраузерность верстки на устройствах 2014 года должна ли быть в 2022 году?

godsplane, При чем тут ширина экрана?
Например, 6ка не понимает гап у флексов. И т.д.

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

Алексей Дубровин, вам нужно прочитать про всплытие событий. Ведь .back-menu лежит в .children и клик срабатывает 2 раза, возвращая активное состояние.
Либо вытащить один из другого.

Как сделать затемнение фона в тот момент когда будет вываливаться меню?

Olga17527, покажите, пожалуйста, в песочнице на jsfiddle.net ваши попытки применить хоть один из указанных мной вариантов.
Ну или любой другой на ваш вкус, благо моими ответ не ограничивается.

Иначе ваши вопросы тянут на задания.

Как сделать такой слайдер?

На сайте-примере установлен slick. Он устарел.
Возьмите swiper.js

Как сделать затемнение фона в тот момент когда будет вываливаться меню?

Да хоть тенью для выпадающего меню.
Либо псевдо растяните на весь вьюпорт, чтобы заблокировать то, что под ним.

Как правильно задать класс по БЭМ?

Alinka121,

то есть по правильному, мне нужно создать блок date, и в нём уже создать date__text ?

Нет абстрактного "правильно".

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

Логические построения и допущения могут быть очень разными в зависимости от задачи.