chore(ia): Reorganize CSS pages - part 7 (moving modules under css/guides) (#41835)

* move css modules starting with letter A to css/guides/

* move css modules starting with letter B to css/guides/

* move css modules starting with letter C to css/guides/

* move css modules starting with letter D to css/guides/

* move css modules starting with letters E and F to css/guides/

* move css modules starting with letter G to css/guides/

* move css modules starting with letter I and L to css/guides/

* move css modules starting with letter M to css/guides/

* move css modules starting with letters N, O to css/guides/

* move css modules starting with letters P and R to css/guides/

* move css modules starting with letter S to css/guides/

* move css modules starting with letter T to css/guides/

* move css modules starting with letters V W to css/guides/

* some more slug updates to sync with short-titles

* move animated properties into guides/animations

* update page types

* update sidebar and add short-titles

* some more slug updates

* updating the guides listing page

* Update files/en-us/web/api/cssprimitivevalue/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update files/en-us/web/api/cssprimitivevalue/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* explain what modules are

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dipikabh

files/en-us/_redirects.txt

@@ -57,7 +57,7 @@ Although mobile browsers can present problems, there are ways to work around the
 
 ### Audio sprites
 
-Audio sprites borrow their name from [CSS sprites](/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS), which is a visual technique for using CSS with a single graphic resource to break it into a series of sprites. We can apply the same principle to audio so that rather than having a bunch of small audio files that take time to load and play, we have one larger audio file containing all the smaller audio snippets we need. To play a specific sound from the file, we just use the known start and stop times for each audio sprite.
+Audio sprites borrow their name from [CSS sprites](/en-US/docs/Web/CSS/Guides/Images/Implementing_image_sprites), which is a visual technique for using CSS with a single graphic resource to break it into a series of sprites. We can apply the same principle to audio so that rather than having a bunch of small audio files that take time to load and play, we have one larger audio file containing all the smaller audio snippets we need. To play a specific sound from the file, we just use the known start and stop times for each audio sprite.
 
 The advantage is that we can prime one piece of audio and have our sprites ready to go. To do this we can just play and instantly pause the larger piece of audio. You'll also reduce the number of server requests and save bandwidth.
 

files/en-us/_wikihistory.json

@@ -9,7 +9,7 @@ The **alignment container** is the rectangle that the {{glossary("alignment subj
 
 ## See also
 
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) module
 - Properties reference
   - CSS {{CSSXref("align-content")}} property
   - CSS {{CSSXref("align-items")}} property

files/en-us/games/techniques/audio_for_web_games/index.md

@@ -5,7 +5,7 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-In [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) the **alignment subject** is the thing (or things) being aligned within the {{glossary("alignment container")}} by the property.
+In [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) the **alignment subject** is the thing (or things) being aligned within the {{glossary("alignment container")}} by the property.
 
 For {{cssxref("justify-self")}} and {{cssxref("align-self")}}, the alignment subject is the margin box of the box the property is set on, using the writing mode of that box. For {{cssxref("justify-content")}} and {{cssxref("align-content")}}, the writing mode of the box is also used.
 
@@ -22,6 +22,6 @@ The definition of the alignment subject depends on the layout mode being used.
 
 ## See also
 
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) module
 - Related glossary terms:
   - {{Glossary("alignment container")}}

files/en-us/glossary/alignment_container/index.md

@@ -15,7 +15,7 @@ As you can see, the color without an alpha channel completely blocks the backgro
 
 ## See also
 
-- [CSS colors](/en-US/docs/Web/CSS/CSS_colors)
+- [CSS colors](/en-US/docs/Web/CSS/Guides/Colors)
 - [Learn: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
 - [Image file type and format guide](/en-US/docs/Web/Media/Guides/Formats/Image_types)
 - [Alpha compositing](https://en.wikipedia.org/wiki/Alpha_compositing) on Wikipedia

files/en-us/glossary/alignment_subject/index.md

@@ -41,8 +41,8 @@ myTrack.applyConstraints(constraints);
 ## See also
 
 - CSS {{cssxref("aspect-ratio")}} property
-- [Understanding aspect ratios](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio) guide
-- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module
+- [Understanding aspect ratios](/en-US/docs/Web/CSS/Guides/Box_sizing/Aspect_ratios) guide
+- [CSS box sizing](/en-US/docs/Web/CSS/Guides/Box_sizing) module
 - Related glossary terms:
   - {{glossary("intrinsic size")}}
 - CSS {{cssxref("min-content")}}, {{cssxref("max-content")}}, and {{cssxref("fit-content")}} property values.

files/en-us/glossary/alpha/index.md

@@ -13,6 +13,6 @@ Other writing systems have different baselines. For example, Tibetan and similar
 
 ## See also
 
-- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment#types_of_alignment)
-- [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module
+- [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment/Overview#types_of_alignment)
+- [CSS inline layout](/en-US/docs/Web/CSS/Guides/Inline_layout) module
 - [Baseline (Typography)](<https://en.wikipedia.org/wiki/Baseline_(typography)>) on Wikipedia

files/en-us/glossary/aspect_ratio/index.md

@@ -27,7 +27,7 @@ While initially popular, `<blink>` became much maligned because of overuse; many
 
 - The CSS {{cssxref("text-decoration-line")}} property has a `blink` value that should have the same effect, but most modern browsers ignore it.
 - The JavaScript {{jsxref("String.blink()")}} method wraps a text string in `<blink></blink>` tags but, as discussed earlier, this element is no longer supported anywhere.
-- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) could still be used to create blinking text. However, you should avoid blinking text on web pages for the reasons discussed above.
+- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) could still be used to create blinking text. However, you should avoid blinking text on web pages for the reasons discussed above.
 
 ## See also
 

files/en-us/glossary/baseline/typography/index.md

@@ -44,6 +44,6 @@ p {
 
 - Related glossary terms:
   - {{glossary("Inline-level content")}}
-- [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
+- [Block formatting context](/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context)
 - {{cssxref("display")}}
 - [`writing-mode`](/en-US/docs/Web/CSS/Reference/Properties/writing-mode)