CSS custom properties don't work in media queries. Custom media queries could help out here but unfortunately, they're not supported yet.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

The custom media queries section explains how to define and reuse aliases for media queries. Custom media queries are in the spec for years, but there doesn't seem to be much interest in implementing them. Neither MDN nor caniuse.com knows about the feature, yet.

Can we have custom media queries, please?

<p>Currently in W3C drafts, but it may be very beneficial!</p>
