Problem description

Given a paragraph element (<p>), write CSS rules to:

1. Define CSS custom properties --min-line-height (2) and --max-line-height (3.2).

2. Create a fluid line-height variable --fluid-line-height using clamp() with a calc() interpolation between these values for viewport widths from 320px to 1600px.

3. Apply --fluid-line-height to the paragraph’s line-height property.

Goal

Enhance readability by fluidly adjusting paragraph line-height based on viewport width without using JavaScript.

Constraints

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

• Do not use JavaScript.

• Support all modern browsers.

• CSS variables should be as follows:

  • --min-line-height: 2;

  • --max-line-height: 3.2;

• Fluid range applies between viewport widths of 320px and 1600px

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.