Убрать обертки вокруг пар заголовок + текст, если не решите использовать семантику.
А то у вас какой-то компот, header внутри div.
Хорошо бы поменять на dl. Ну или на table.
Опять же, если без оберток, то всё само и расставится, если с обертками, то subgrid либо js, если не устраивает поддержка сабгрида..
Во-первых, кроме vw, уже есть единицы от контейнера cqw, cqi и т.д.
Во-вторых, в css есть функции для ограничения размера min, max и clamp.
А в-третьих, нужно помнить, что совсем не всегда можно просто так взять и уменьшить шрифт пропорционально ширине вьюпорта/контейнера. Бывают дизайны и дизайнеры, которые наоборот, на мобилках делают шрифт крупнее, чем на десктопах.
Ну вы даете, какой же это сложный вопрос.
Во-первых, ответ есть прямо на сайте про который вы спрашиваете. Во-вторых, вариантов много.
Градиент делается очень банально радиальным градиентом.
Альтернативы:
svg + blur
svg и blur внутри
псевдо + blur
Но это может давать тормоза. Если таких штук много. Если не много, то и норм.
Поэтому, часто сохраняют в png (webp, avif) и вставляют фоном.
Blondguy
Гриды, флексы..
Для скруглений псевдо либо с радиальными градиентами или svg.
Я неоднократно отвечала на подобный вопрос, можете поискать. Мне сегодня лень собирать ссылки.
Со скруглениями тут какая-то немножко беда. Правда, если это стиль макета такой и другие элементы поддерживают эту кривизну, то ок.
grid-template-columns: repeat(auto-fill, 33.2rem)или auto-fit
или с minmax