Add max-site-width CSS utility class

DOCUMENTATION.md

@@ -1144,10 +1144,10 @@ If you have the Elementor plugin installed, consider using the [Fictioneer 002 E
 * Use the `padding-[top|right|bottom|left]` CSS classes to apply theme page padding.
 * Use the `bg-[50|100|200|...|800|900|950]` CSS classes to force theme background colors.
 * Use the `fg-[100|200|...|800|900|950]` CSS classes to force theme text colors.
+* Use the `max-site-width` CSS classes to apply the theme’s max site width.
 * Some of the [content utility CSS classes](#additional-css-classes) will also work for Elementor.
 * You can toggle the mobile menu with a label targeting the `mobile-menu-toggle` ID.
 * The position and expected content of the header depend on your Customizer choices.
-* The default site with is stored in the `--site-width` custom CSS property.
 * The global Elementor text colors have been overwritten with theme colors.
 * Elementor does not understand the theme’s display modes, colors, or HSL settings.
 * Elementor makes your site slower unless you have a good cache plugin.

src/scss/common/_utility.scss

@@ -388,3 +388,7 @@ html:not(.logged-in) body:not(.logged-in) .hide-if-logged-out,
 .fg-inverted {
   color: var(--fg-inverted) !important;
 }
+
+.max-site-width {
+  max-width: var(--site-width) !important;
+}