[mediaqueries] Add the 'color-gamut' query function

mediaqueries/Overview.bs

@@ -1447,6 +1447,49 @@ inverted-colors</h3>
 		</pre>
 	</div>
 
+<h3 id="color-gamut">
+color-gamut</h3>
+
+	<pre class='descdef mq'>
+	Name: color-gamut
+	Value: srgb | p3 | rec2020
+	For: @media
+	Type: range
+	</pre>
+
+	The 'color-gamut' media feature describes the approximate range of colors that are
+	supported by the browser and display device. That is, if the browser receives content
+	with colors in the specified space it can cause the display to render the appropriate
+	color, or something appropriately close enough.
+
+	The query uses approximate ranges for a few reasons. Firstly, there are a lot of differences in
+	display hardware. For example, a device might claim to support "Rec 2020", but actually
+	renders a significantly lower range of the full gamut. Secondly, there are a lot of different
+	color ranges that different devices support, and enumerating them all would be tedious.
+	In most cases the author does not need to know the exact capabilities of the display, just
+	whether it is better than sRGB, or significantly better than sRGB. That way they can serve
+	appropriate images, tagged with color profiles, to the user.
+
+	The value 'srgb' represents a display that corresponds to the sRGB Color Space [[!SRGB]].
+	It is expected that the vast majority of color displays will be able to return true
+	to a query of this type.
+
+	The value 'p3' represents a display that can handle colors in approximately the gamut
+	specified by the DCI P3 Color Space.
+
+	The value 'rec2020' represents a display that can handle colors in approximately the gamut
+	specified by the ITU-R Recommendation BT.2020 Color Space.
+
+	<div class="example">
+		For example, this media query applies when the display supports colors
+		in the range of DCI P3:
+
+		<pre>
+		@media (color-gamut: p3) { … }
+		</pre>
+	</div>
+
+
 
 <!--
 ████ ██    ██ ████████ ████████ ████████     ███     ██████  ████████ ████  ███████  ██    ██