Problem description

Design a responsive sitewide vertical rhythm that adjusts at three viewport breakpoints: small (<480px), medium (480px–768px), and large (>768px). Use CSS custom properties and @media queries to switch the baseline grid unit between 1rem, 1.5rem, and 2rem, and apply it consistently to h1, h2, h3, p, ul, ol, and blockquote.

Goal

Use only HTML and CSS to:

1. Define --rhythm-small (1rem), --rhythm-medium (1.5rem), and --rhythm-large (2rem) in :root.

2. Initialize --rhythm to var(--rhythm-small).

3. Create media queries for (min-width: 480px) to set --rhythm to var(--rhythm-medium), and (min-width: 768px) to set --rhythm to var(--rhythm-large).

4. Apply line-height and margin-bottom equal to var(--rhythm) on h1, h2, h3, p, li, blockquote.

Constraints

• Only CSS is allowed.

• Use rem units and CSS custom properties.

• CSS file must be named styles.css.

• Do not use JavaScript or alter the provided HTML structure.

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.