Problem description

Create a responsive vertical rhythm where the spacing between text elements (headings and paragraphs) scales fluidly with the viewport width. Specifically, use CSS variables and clamp() to adjust the line-height and bottom margin of <h1>, <h2>, and <p> elements so they transition smoothly between a 1rem rhythm on small screens and a 2rem rhythm on large screens.

Goal

Use only HTML and CSS to:

1. Define --min-rhythm (1rem), --max-rhythm (2rem), --min-vw (320px), and --max-vw (1024px) in :root.

2. Apply clamp() to line-height and margin-bottom of <h1>, <h2>, and <p> so they scale between --min-rhythm and --max-rhythm as the viewport width changes.

Constraints

• Only CSS is allowed.

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

• CSS file must be named styles.css.

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