Problem description

Given a page with an <h1> and <p>, write CSS rules to:

1. Define CSS custom properties:

   1. Mobile root font: --min-root-mobile (14px) and --max-root-mobile (18px)

   2. Desktop root font: --min-root-desktop (18px) and --max-root-desktop (24px)

   3. Scale multipliers: --scale-h1 (2.2) and --scale-p (1)

2. Compute --fluid-root-mobile using clamp() with interpolation for viewport widths from 320px to 768px.

3. Inside a @media (min-width: 768px) block, compute --fluid-root-desktop using clamp() for viewport widths from 768px to 1440px.

4. Apply font-size: calc(var(--fluid-root-mobile) * var(--scale-h1)) to <h1> on mobile, and inside the media query override to use --fluid-root-desktop.

5. Similarly, set <p> to calc(var(--fluid-root-mobile) * var(--scale-p)) and override in desktop.

Goal

Demonstrate advanced responsive typography by segmenting fluid scaling into multiple viewport ranges with breakpoint-specific interpolation.

Constraints

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

• Do not use JavaScript.

• Support all modern browsers.

• Mobile range should be 320px–768px; desktop range should be 768px–1440px.

• Custom properties should be as specified.

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.