Add & move Formal syntax section for css at-rule (#37346)

* Add & move Formal syntax section for css at-rule

* Update index.md

files/en-us/web/css/@color-profile/index.md

@@ -36,6 +36,10 @@ The **`@color-profile`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CS
     - `saturation`
       - : This option was created to preserve the relative saturation (chroma) of the original, and to keep solid colors pure. However, it experienced interoperability problems like the perceptual intent.
 
+## Formal syntax
+
+{{csssyntax}}
+
 ## Examples
 
 This example is from the specification and demonstrates using offset printing to ISO 12647-2:2004 using the CGATS/SWOP TR005 2007 characterization data on grade 5 paper with an ink limit of 300% Total Area Coverage, and medium gray component replacement (GCR).
@@ -51,10 +55,6 @@ The `src` descriptor specifies the URL to retrieve the color-profile information
 }
 ```
 
-## Formal syntax
-
-{{csssyntax}}
-
 ## Specifications
 
 {{Specifications}}

files/en-us/web/css/@container/index.md

@@ -148,6 +148,10 @@ The following descriptors can be used within the container condition:
 - `width`
   - : The width of the container expressed as a {{cssxref("length")}} value.
 
+## Formal syntax
+
+{{csssyntax}}
+
 ## Examples
 
 ### Setting styles based on a container's size

files/en-us/web/css/@media/index.md

@@ -171,6 +171,10 @@ Some media queries have corresponding [user agent client hints](/en-US/docs/Web/
 These are HTTP headers that request content that is pre-optimized for the particular media requirement.
 They include {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} and {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}.
 
+## Formal syntax
+
+{{csssyntax}}
+
 ## Accessibility
 
 To best accommodate people who adjust a site's text size, use [`em`](/en-US/docs/Web/CSS/CSS_Values_and_Units#numeric_data_types)s when you need a {{cssxref("<length>")}} for your [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries).
@@ -186,10 +190,6 @@ Because media queries provide insights into the capabilities—and by extension,
 
 Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.
 
-## Formal syntax
-
-{{csssyntax}}
-
 ## Examples
 
 ### Testing for print and screen media types