Problem description

Given a <figure> with a child <figcaption>, write CSS rules that allow the caption text to adjust fluidly between 12px and 18px as the viewport width changes.

Goal

Use CSS to ensure figure captions remain legible and appropriately sized across devices by implementing a fluid font sizing approach.

Constraints

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

• Do not use JavaScript.

• Support all modern browsers.

• Caption font size must be between a minimum of 12px and a maximum of 18px.

• Viewport widths should be between 320px and 1200px.

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.