Make spacer utils responsive (#20926)

* make spacer utils responsive by grid tier
* update scale to add two levels, document them
* change responsive spacing utils to avoid the xs abbreviation in the class name for that tier
* update code snippet to match source
* update usage in our docs
* linter
* docs updates

scss/_variables.scss

@@ -135,14 +135,22 @@ $spacers: (
     y: 0
   ),
   1: (
+    x: ($spacer-x * .25),
+    y: ($spacer-y * .25)
+  ),
+  2: (
+    x: ($spacer-x * .5),
+    y: ($spacer-y * .5)
+  ),
+  3: (
     x: $spacer-x,
     y: $spacer-y
   ),
-  2: (
+  4: (
     x: ($spacer-x * 1.5),
     y: ($spacer-y * 1.5)
   ),
-  3: (
+  5: (
     x: ($spacer-x * 3),
     y: ($spacer-y * 3)
   )