Problem description

Define a variable-based typographic scale and apply it to headings and paragraphs to maintain a consistent 1rem baseline grid across your document.

Goal

Use only HTML and CSS to:

1. Define --rhythm (1rem) and --scale-factor (1.5) in :root.

2. Apply font-size to <h1>, <h2>, <h3>, and <p> using calc() with these variables.

3. Set margin-bottom on all text elements to var(--rhythm) to maintain the baseline grid.

Constraints

• Only HTML and CSS.

• Use rem units and CSS variables.

• CSS file must be named styles.css.

• Maintain a 1rem baseline grid for margins.

• Do not use JavaScript or modify HTML beyond the 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.