Problem description

Implement fluid typography using a modular scale and CSS clamp(), ensuring font sizes adapt between viewport widths while preserving a 1rem baseline grid.

Goal

Use only HTML and CSS to:

1. Define --rhythm, --base-size, and --scale-factor variables.

2. Apply clamp() to generate fluid font-size values for <h1>, <h2>, and <p>.

3. Ensure each element’s line-height and bottom margin align to a 1rem baseline grid.

Constraints

• Only HTML and CSS are allowed.

• Use rem units, CSS variables, and clamp().

• CSS file must be named styles.css.

• Maintain a 1rem baseline grid for line-height and margins.

• Do not use JavaScript or modify HTML structure beyond provided skeleton.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.