Move Composition page to Guides category

Author: Brijesh Bittu

docs/src/content/features/composition.mdx docs/src/content/guides/composition.mdx

@@ -3,7 +3,7 @@
 <Subtitle>How Pigment CSS handles css precedence and composition.</Subtitle>
 <Meta name="description" content="How Pigment CSS handles CSS precedence and composition." />
 
-Styles authored with Pigment CSS will be scoped to the component and won't affect globals styles or styles of any other styled components.
+Styles authored with Pigment CSS will be scoped to the component and won't affect globals styles or styles of any other styled components. This is mainly done by using uniquely generated class names that are hard to override through global styles since you don't know the class names beforehand.
 
 In a way, it is similar to CSS Modules except, the styles are written in JS and colocated with the components.
 

docs/src/nav.ts

@@ -45,10 +45,6 @@ export const nav: NavItem[] = [
         label: 'Variants',
         href: '/features/variants',
       },
-      {
-        label: 'Composition',
-        href: '/features/composition',
-      },
     ],
   },
   {
@@ -59,6 +55,10 @@ export const nav: NavItem[] = [
         label: 'How it works',
         href: '/guides/how-it-works',
       },
+      {
+        label: 'Composition',
+        href: '/guides/composition',
+      },
       {
         label: 'Migration',
         href: '/guides/migration',