Problem description

Implement a context-aware vertical rhythm that adapts based on container width: narrow containers use a 1rem rhythm, and wide containers use a 2rem rhythm. Use CSS container queries to switch the rhythm unit, then apply it to headings (<h1>, <h2>), paragraphs (<p>), and list items (<li>), ensuring each context maintains its own baseline grid.

Goal

Use only HTML and CSS to:

1. Define a default --rhythm: 1rem; in :root.

2. Enable container queries by adding container-type: inline-size; to .container.

3. Use @container (min-width: 800px) to override --rhythm: 2rem; within wide containers.

4. Apply line-height: var(--rhythm); and margin-bottom: var(--rhythm); to .container h1, .container h2, .container p, .container li.

Constraints

• Only CSS is allowed.

• Use rem units, CSS variables, and CSS Container Queries.

• 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.