How is the following not a valid CSS property?

Question

I'm getting an error in dev tools saying that the following is an invalid property. I've tested it in all major browsers, current versions;

font-size: clamp(1.71rem, calc(1.71rem + ((100vw - 1440px) * (6.08rem - 1.71rem) / (3680px))), 6.08rem);

The purpose of this clamp function is to scale a heading between 1440px resolutions, upwards to 5120px resolutions. It assumes a base font-size of 4.56rem at 3840px, and scales in a linear fashion according to increase or decrease contingent to the monitor's resolution.

Am I misunderstanding something here? It looks pretty straight forward;

Minimum Value (Min): 1.71rem

Preferred Value (Value): calc(1.71rem + ((100vw - 1440px) * (6.08rem - 1.71rem) / (3680px)))

Maximum Value (Max): 6.08rem`

Thank you for you assistance.

Kind regards.

• I tried replacing the font-size with a normal value such as 4.56rem, and changes were reflected in my page. Thus I am certain it's not overlooked linking issue.

• I've dumped the function into an isolated codepen so I know it's not a specificity issue.

• I was expected the font-size for the heading to scale proportionately with the resizing of the view port,. but no dice.