Nested Calc Inside a Media Query about css-vars-ponyfill

[jhildenbiddle]

CSS custom properties don't work in media queries in modern browsers either. This is per the specification:

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

It's unfortunate because assigning breakpoint values to variables is a common use case for CSS preprocessors. Unfortunately, CSS custom properties don't work that way.