Готовый hero — код и результат

Семантическая структура, fluid-шкала и понятные ограничения. Превью показывает «средний» кадр ширины.

<section class="hero">
  <p class="eyebrow">HTML & CSS</p>
  <h1>Плавная типографика без лишних breakpoint</h1>
  <p class="lead">Размеры растут вместе с экраном…</p>
</section>

:root {
  /* модульная шкала: каждый шаг — отдельный clamp() */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);  /* текст */
  --step-5: clamp(2.25rem, 1.4rem + 4vw, 5rem);      /* hero h1 */

  --space-section: clamp(3rem, 8vw, 7rem);           /* fluid spacing */
  --space-card: clamp(1rem, 2vw, 2rem);
}

.hero { padding-block: var(--space-section); }

.hero h1 {
  max-width: 12ch;          /* короткий заголовок */
  font-size: var(--step-5);
  line-height: 1;
}

.lead {
  max-width: 65ch;          /* комфортная длина строки */
  font-size: var(--step-0);
  line-height: 1.6;
}

Разбор по заданиям

• Задание 1 (fluid h1): --step-5 = clamp(2.25rem, 1.4rem + 4vw, 5rem). Базовый 1.4rem + 4vw даёт плавный рост; вилка 2.25rem…5rem не даёт перегибов.
• Задание 2 (measure): max-width: 65ch на .lead — строка остаётся короткой на любом экране.
• Задание 3 (шкала отступов): --space-section и --space-card через var() дают единый ритм; меняешь шкалу в одном месте.
• Задание 4 (диагностика): три @media для font-size заменяются одной строкой clamp() — нет скачков и меньше кода.