Document .contains-* container-query utilities (#42726)

Add a Container queries page under Utilities > Layout documenting the
.contains-inline and .contains-size utilities (container-type), wire it
into the sidebar, and add scss-docs markers so its Sass API renders.

Author: mdo

scss/_utilities.scss

@@ -94,6 +94,7 @@ $utilities: map.merge(
       values: auto hidden visible scroll,
     ),
     // scss-docs-end utils-overflow
+    // scss-docs-start utils-container
     "container": (
       property: container-type,
       class: contains,
@@ -102,6 +103,7 @@ $utilities: map.merge(
         "size": size,
       )
     ),
+    // scss-docs-end utils-container
     // scss-docs-start utils-display
     "display": (
       responsive: true,

site/data/sidebar.yml

@@ -191,6 +191,7 @@
     - group: Layout
       pages:
         - title: Aspect ratio
+        - title: Container queries
         - title: Display
         - title: Float
         - title: Object fit

site/src/content/docs/utilities/container-queries.mdx

@@ -0,0 +1,40 @@
+---
+title: Container queries
+description: Turn an element into a query container with container-type utilities so descendants can respond to its size.
+utility:
+  - container
+---
+
+Use the `.contains-*` utilities to set the `container-type` property, establishing an element as a [query container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries). Once an element is a query container, its descendants can adapt their styles based on the container’s size rather than the viewport.
+
+Apply `.contains-inline` to query on inline size (width in horizontal writing modes), or `.contains-size` to query on both inline and block size.
+
+```html
+<div class="contains-inline">
+  <div class="card">...</div>
+</div>
+```
+
+```scss
+// Classes
+.contains-inline {
+  container-type: inline-size;
+}
+.contains-size {
+  container-type: size;
+}
+```
+
+<Callout>
+`.contains-size` queries the container’s block size as well, so the element must have an explicit height for `size` containment to resolve. When in doubt, reach for `.contains-inline`.
+</Callout>
+
+Several components rely on a query container to enable their responsive layouts. For example, wrap a `.card-group` or a horizontal `.list-group` in an element with `.contains-inline` so their container-query-based layouts take effect.
+
+## CSS
+
+### Sass utilities API
+
+Container utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+<ScssDocs name="utils-container" file="scss/_utilities.scss" />