Задания
Задание 1. Fluid-заголовок
Задай <h1> размер clamp(2rem, 5vw, 4rem) и line-height: 1.1.
Плавно тяни край окна в DevTools — заголовок должен расти без скачков и упираться в границы.
Ожидаемый результат (три «кадра» ширины):
Задание 2. Комфортная длина строки
Оберни лид-абзац в max-width: 60ch и line-height: 1.6. На широком экране строка не должна
растягиваться на всю ширину — она остаётся короткой и читаемой.
Задание 3. Модульная шкала отступов
Заведи в :root переменные --space-section: clamp(3rem, 8vw, 7rem) и
--space-card: clamp(1rem, 2vw, 2rem). Примени их к секции и карточке. Проверь, что поля сжимаются на
телефоне и раскрываются на десктопе, сохраняя единый ритм.
Задание 4. Диагностика
Возьми старый CSS с тремя @media для font-size и замени их одним clamp().
Сравни: тот же визуальный диапазон достигается без скачков и с меньшим количеством кода.
Самопроверка: нет горизонтального скролла; заголовок читается на телефоне (не мельче min);
строки лида короткие; отступы меняются плавно. Решения — на следующей странице.