Update routes

site/app/[locale]/guide/configuration/content.mdx

@@ -46,7 +46,7 @@ Customizing abstract [styles](/guide/styles) for your design system.
 <StylesOverview />
 
 ### `.variables`
-Customizing [variables](/reference/variables) for your design tokens.
+Customizing [variables](/guide/variables) for your design tokens.
 <VariablesOverview />
 
 ### `.extends`

site/app/[locale]/guide/introduction/components/Comparisons.mdx

@@ -132,7 +132,7 @@ export const bootstrap = brands.find(({ name }) => name === 'Bootstrap')
             <td colSpan={4}><small>The ability to customize tokens</small></td>
         </tr>
         <tr>
-            <th>[Breakpoints](/guide/responsive-design) and [Screens](/reference/variables#screens-and-breakpoints)</th>
+            <th>[Breakpoints](/guide/responsive-design) and [Screens](/reference/screens)</th>
             <td>11</td>
             <td>5</td>
             <td>5</td>
@@ -144,13 +144,13 @@ export const bootstrap = brands.find(({ name }) => name === 'Bootstrap')
             <td>~100</td>
         </tr>
         <tr>
-            <th>[Variables with Modes](/reference/variables-with-modes)</th>
+            <th>[Variables with Modes](/guide/variables-with-modes)</th>
             <td><InlineGood /></td>
             <td><InlineBad /></td>
             <td><InlineBad /></td>
         </tr>
         <tr>
-            <th>[Selectors](/reference/variables-with-modes)</th>
+            <th>[Selectors](/guide/variables-with-modes)</th>
             <td><InlineGood /></td>
             <td><InlineBad /></td>
             <td><InlineBad /></td>

site/app/[locale]/guide/migration/tailwindcss/content.mdx

@@ -116,7 +116,7 @@ Not just media queries but feature queries and [more](/reference/syntaxes).
 
 ## Configuration
 ### Add screens
-Define responsive breakpoints using variable [screens](/reference/variables#add-a-screen-size).
+Define responsive breakpoints using variable [screens](/guide/variables#add-a-screen-size).
 ```js name=master.css.js
 -/** @type {import('tailwindcss').Config} */
 -module.exports = {

site/app/[locale]/guide/responsive-design/content.mdx

@@ -5,11 +5,11 @@
 ```html
 <div class="grid-cols:2 grid-cols:3**@xs** grid-cols:4**@sm** grid-cols:5**@md** …">…</div>
 ```
-The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to [11 predefined screen sizes](/reference/variables#screens-and-breakpoints) available.
+The syntax in Master CSS allows for the conditional application of styles at different viewports, with up to [11 predefined screen sizes](/reference/screens) available, from `4xs` ~ `4xl`. This comprehensive coverage caters to the modern web layout scenario.
 
-This comprehensive coverage caters to the modern web layout scenario.
-<Default />
-To customize responsive breakpoints, see the [custom theme](/reference/variables#screens-and-breakpoints) documentation.
+To customize responsive breakpoints, see the [variables](/guide/variables#screens-and-breakpoints) documentation.
+
+---
 
 ## Strategies
 When it comes to designing and developing responsive web pages, [mobile-first](#mobile-first) and [desktop-first](#desktop-first) are two common development strategies. The decision between these two strategies depends on your project requirements, target audience, and operational decisions.

site/app/[locale]/guide/style-declarations/components/Tokens.mdx

@@ -13,5 +13,5 @@ Applying certain property values ​​is often not so concise in class attribut
 
 import VariablesOverview from '~/site/app/[locale]/guide/variables/components/Overview.mdx'
 
-By default, Master CSS uses predefined variables to simplify native values. You can customize [variables](/reference/variables) to implement your design system, for example:
+By default, Master CSS uses predefined variables to simplify native values. You can customize [variables](/guide/variables) to implement your design system, for example:
 <VariablesOverview />

site/app/[locale]/guide/variables/content.mdx

@@ -9,7 +9,7 @@ Design tokens are a fundamental part of design systems and are crucial for maint
 By default, Master provides three [font family](/reference/font-family) variables, `sans`, `serif`, and `mono`, to facilitate your use as fallbacks when adding custom fonts.
 
 ### Add fonts
-Customize your font tokens by defining [variables](/reference/variables). For example, add `Inter` as the general font and `Fira Code` as the code font.
+Customize your font tokens by defining [variables](/guide/variables). For example, add `Inter` as the general font and `Fira Code` as the code font.
 ```js name=master.css.js
 import { variables } from '@master/css'
 
@@ -179,7 +179,7 @@ Conditionally apply styles using default screen variables as responsive breakpoi
 The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation.
 
 ### Add a screen size
-Add your screen size by defining [variables](/reference/variables).
+Add your screen size by defining [variables](/guide/variables).
 <Code lang="js" name="master.css.js">{require('!!raw-loader!./tests/add-a-screen-size/master.css.js').default}</Code>
 Apply the defined screen variables anywhere:
 <Code lang="html">{require('!!raw-loader!./tests/add-a-screen-size/template.html').default}</Code>
@@ -230,7 +230,7 @@ For other intermediate values, `0`, `1`, `2`, ..., we tend to use unitless token
 ```
 
 ### Add a spacing
-Customize your spacing [variables](/reference/variables), in `xs~xl`.
+Customize your spacing [variables](/guide/variables), in `xs~xl`.
 ```js name=master.css.js
 export default {
     variables: {

site/app/[locale]/reference/content/content.mdx

@@ -22,7 +22,7 @@ Whitespace is used in the class attribute of the template to separate different
 ```
 Is it not very kind to use `\00a0` in markup?
 
-(o) Predefine your content [variables](/reference/variables) without `\00a0`.
+(o) Predefine your content [variables](/guide/variables) without `\00a0`.
 ```js name=master.css.js
 /** @type {import('@master/css').Config} */
 export default {

site/app/[locale]/reference/font-family/content.mdx

@@ -17,7 +17,7 @@
         </div>
     </DemoPanel>
 </Demo>
-Using shorthand with predefined [variables](/reference/variables) to simplify the native syntax.
+Using shorthand with predefined [variables](/guide/variables) to simplify the native syntax.
 ```html
 <div class="font-family:sans">
 +<div class="font:sans">Recommanded

site/app/[locale]/reference/screens/content.mdx

@@ -16,10 +16,4 @@ Conditionally apply styles using default screen variables as responsive breakpoi
 ```html
 <div class="font:24 font:32**@sm** font:48**@md**">…</div>
 ```
-The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation.
-
-### Create a responsive container
-Fixed element width to a screen size as a responsive container.
-```html
-<div class="**max-w:screen-sm@sm** **max-w:screen-md@md** **max-w:screen-lg@lg** …">…</div>
-```
+The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation.