Problem description

Given a .card element with a heading (<h2>) and paragraph (<p>), write CSS rules to:

1. Enable container query on .card by setting container-type: inline-size.

2. Define fluid font sizes inside a container query for container widths between 300px and 800px:

   1. <h2> scales from 20px (min) to 32px (max) using clamp().

   2. <p> scales from 14px (min) to 18px (max) using clamp().

3. Provide a fallback using @supports not (container-type: inline-size) to apply static font sizes:

   1. <h2> at 20px

   2. <p> at 14px.

Goal

Demonstrate advanced fluid typography techniques by adapting text size based on container width with graceful degradation for legacy browsers.

Constraints

• The solution must use an external stylesheet named styles.css.

• Do not use JavaScript.

• Support modern browsers with CSS Container Queries and fallback in others.

• Container width range should be from 300px to 800px.

• Static fallback sizes should be as follows: <h2> 20px and <p> 14px.

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.