Problem description

Within a responsive component, adjust the vertical rhythm dynamically based on the component’s width. Use CSS @container queries and custom properties to switch between 1rem and 2rem baseline grid inside a .card component, ensuring all h1, h2, h3, p, and li inside the card maintain the correct rhythm at any size.

Goal

Use only HTML and CSS to:

1. Define --rhythm-min (1rem) and --rhythm-max (2rem) at the root.

2. Enable container queries on .card and default --rhythm to --rhythm-min.

3. In a @container query for (min-width: 600px), set --rhythm to --rhythm-max within the .card.

4. Apply line-height and margin-bottom based on var(--rhythm) to <h1>, <p>, and <li> inside the .card.

Constraints

• Only CSS is allowed.

• Use rem units, CSS custom properties, and CSS Container Queries.

• CSS file must be named styles.css.

• Do not modify the HTML structure or use JavaScript.

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.