[mediaqueries-5] Add example

This helps lift the confusion that prompted #5458

Author: frivoal

mediaqueries-5/Overview.bs

@@ -2606,6 +2606,32 @@ Custom Media Queries</h2>
 	If <dfn value for="@custom-media">true</dfn> or <dfn value for="@custom-media">false</dfn> is given,
 	the <a>custom media query</a> evaluates to true or false, respectively.
 
+	<div class=example>
+		The [=custom media query=] is evaluated logically, not treated as a textual substitution.
+		Take the following code snippet for instance:
+		<pre><code class=lang-css>
+		/* --modern targets modern devices that support color or hover */
+		@custom-media --modern (color), (hover);
+
+		@media (--modern) and (width > 1024px) {
+			.a { color: green; }
+		}
+		</code></pre>
+		It is equivalent to:
+		<pre><code class=lang-css>
+		@media ((color) or (hover)) and (width > 1024px) {
+			.a { color: green; }
+		}
+		</code></pre>
+
+		Processing it as if it meant the following would be incorrect:
+		<pre><code class=lang-css>
+		@media (color), (hover) and (width > 1024px) {
+			.a { color: green; }
+		}
+		</code></pre>
+	</div>
+
 	A ''@custom-media'' rule can refer to other <a>custom media queries</a>.
 	However, loops are forbidden,
 	and a <a>custom media query</a> must not be defined in terms of itself or