⚠️ Your browser doesn't currently support CSS custom functions.
This example features a custom CSS function called
--narrow-wide(), which takes two parameters — a value to
apply to a narrow layout and a value to apply to a wide layout.
The custom function is very useful — you can use it as the value of just about any property where you want to provide a choice of values — one for a narrow layout and one for a wide layout.
The --narrow-wide() function is built using two CSS custom
properties and a media query to detect whether the viewport is narrower
or wider than the provided breakpoint, and return one value or the other
as appropriate.