The Scale

clamp(): Three Values, One Fluid Size

You have used clamp() in the era units since Unit 11, but it was always pre-written. This is the stage where you learn to write it yourself and understand what the three values do.

clamp() takes three arguments: a minimum value, a preferred value, and a maximum value. The browser uses the preferred value as long as it stays between the minimum and maximum. When the preferred would go below the minimum, the minimum wins. When it would go above the maximum, the maximum wins.

Read that as: "Never smaller than 1.75rem. Never larger than 2.5rem. Prefers 3.5vw, which is 3.5% of the viewport width." On a 400px phone, 3.5vw is 14px. On a 1400px desktop, 3.5vw is 49px. But the clamp keeps it from going lower than 1.75rem (28px) or higher than 2.5rem (40px). So it scales fluidly between those guardrails.

Replace Two Media Queries with One clamp()

Look at the .era-number CSS from Stage 2. It uses two separate declarations: font-size: 4.5rem as the default and font-size: 7rem inside a min-width: 768px query. That is two rules to handle one scaling concern.

The @media (min-width: 768px) block for .era-number is removed in Stage 3, the clamp() handles everything that the two rules were doing, plus fills in the smooth curve between them.

The width: 140px and text-align: right on the desktop version still need to live in a media query because those are layout decisions, not size decisions. clamp() only handles numeric values.

Add the Eras Section Header

Add a brief header above the eight era entries. This gives the entries section a clear opening and introduces another opportunity to use clamp() on a heading. The header has two parts: a small label and a large heading.

Also update the .era-name font-size to use clamp(). The Stage 2 value was a fixed 1.75rem. Replace it with clamp(1.5rem, 3.5vw, 2.25rem) so era names scale fluidly across screen sizes without needing a separate media query.