@primer/brand-css 0.0.0-20250212132611

package/components/Box/Box.css

@@ -0,0 +1,2795 @@
+/* ---------------------------------------------------------- */
+/* Box component table of contents                            */
+/* Please ensure that this is kept up to date as the          */
+/* component evolves.                                         */
+/* ---------------------------------------------------------- */
+/* Table of contents:                                         */
+/* 1. Padding                                                 */
+/* 2. Padding Top                                             */
+/* 3. Padding Right                                           */
+/* 4. Padding Bottom                                          */
+/* 5. Padding Left                                            */
+/* 6. Margin                                                  */
+/* 7. Margin Top                                              */
+/* 8. Margin Right                                            */
+/* 9. Margin Bottom                                           */
+/* 10. Margin Left                                            */
+/* 11. Background Colors                                      */
+/* 12. Border Radius                                          */
+/* 13. Border Width                                           */
+/* 14. Border Color                                           */
+/* 15. Border Style                                           */
+/* ---------------------------------------------------------- */
+
+/**
+ * 1. Padding
+ */
+.Box-padding--condensed {
+  padding: var(--brand-box-spacing-condensed);
+}
+.Box-padding--normal {
+  padding: var(--brand-box-spacing-normal);
+}
+.Box-padding--spacious {
+  padding: var(--brand-box-spacing-spacious);
+}
+
+.Box-padding--none {
+  padding: 0;
+}
+
+.Box-padding--4 {
+  padding: var(--base-size-4);
+}
+.Box-padding--8 {
+  padding: var(--base-size-8);
+}
+.Box-padding--12 {
+  padding: var(--base-size-12);
+}
+.Box-padding--16 {
+  padding: var(--base-size-16);
+}
+.Box-padding--20 {
+  padding: var(--base-size-20);
+}
+.Box-padding--24 {
+  padding: var(--base-size-24);
+}
+.Box-padding--28 {
+  padding: var(--base-size-28);
+}
+.Box-padding--32 {
+  padding: var(--base-size-32);
+}
+.Box-padding--36 {
+  padding: var(--base-size-36);
+}
+.Box-padding--40 {
+  padding: var(--base-size-40);
+}
+.Box-padding--44 {
+  padding: var(--base-size-44);
+}
+.Box-padding--48 {
+  padding: var(--base-size-48);
+}
+.Box-padding--64 {
+  padding: var(--base-size-64);
+}
+.Box-padding--80 {
+  padding: var(--base-size-80);
+}
+.Box-padding--96 {
+  padding: var(--base-size-96);
+}
+.Box-padding--112 {
+  padding: var(--base-size-112);
+}
+.Box-padding--128 {
+  padding: var(--base-size-128);
+}
+.Box-narrow-padding--condensed {
+  padding: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-padding--normal {
+  padding: var(--brand-box-spacing-normal);
+}
+.Box-narrow-padding--spacious {
+  padding: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-padding--none {
+  padding: 0;
+}
+
+.Box-narrow-padding--4 {
+  padding: var(--base-size-4);
+}
+.Box-narrow-padding--8 {
+  padding: var(--base-size-8);
+}
+.Box-narrow-padding--12 {
+  padding: var(--base-size-12);
+}
+.Box-narrow-padding--16 {
+  padding: var(--base-size-16);
+}
+.Box-narrow-padding--20 {
+  padding: var(--base-size-20);
+}
+.Box-narrow-padding--24 {
+  padding: var(--base-size-24);
+}
+.Box-narrow-padding--28 {
+  padding: var(--base-size-28);
+}
+.Box-narrow-padding--32 {
+  padding: var(--base-size-32);
+}
+.Box-narrow-padding--36 {
+  padding: var(--base-size-36);
+}
+.Box-narrow-padding--40 {
+  padding: var(--base-size-40);
+}
+.Box-narrow-padding--44 {
+  padding: var(--base-size-44);
+}
+.Box-narrow-padding--48 {
+  padding: var(--base-size-48);
+}
+.Box-narrow-padding--64 {
+  padding: var(--base-size-64);
+}
+.Box-narrow-padding--80 {
+  padding: var(--base-size-80);
+}
+.Box-narrow-padding--96 {
+  padding: var(--base-size-96);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-padding--condensed {
+    padding: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-padding--normal {
+    padding: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-padding--spacious {
+    padding: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-padding--none {
+    padding: 0;
+  }
+  .Box-regular-padding--4 {
+    padding: var(--base-size-4);
+  }
+  .Box-regular-padding--8 {
+    padding: var(--base-size-8);
+  }
+  .Box-regular-padding--12 {
+    padding: var(--base-size-12);
+  }
+  .Box-regular-padding--16 {
+    padding: var(--base-size-16);
+  }
+  .Box-regular-padding--20 {
+    padding: var(--base-size-20);
+  }
+  .Box-regular-padding--24 {
+    padding: var(--base-size-24);
+  }
+  .Box-regular-padding--28 {
+    padding: var(--base-size-28);
+  }
+  .Box-regular-padding--32 {
+    padding: var(--base-size-32);
+  }
+  .Box-regular-padding--36 {
+    padding: var(--base-size-36);
+  }
+  .Box-regular-padding--40 {
+    padding: var(--base-size-40);
+  }
+  .Box-regular-padding--44 {
+    padding: var(--base-size-44);
+  }
+  .Box-regular-padding--48 {
+    padding: var(--base-size-48);
+  }
+  .Box-regular-padding--64 {
+    padding: var(--base-size-64);
+  }
+  .Box-regular-padding--80 {
+    padding: var(--base-size-80);
+  }
+  .Box-regular-padding--96 {
+    padding: var(--base-size-96);
+  }
+  .Box-regular-padding--112 {
+    padding: var(--base-size-112);
+  }
+  .Box-regular-padding--128 {
+    padding: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-padding--condensed {
+    padding: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-padding--normal {
+    padding: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-padding--spacious {
+    padding: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-padding--none {
+    padding: 0;
+  }
+  .Box-wide-padding--4 {
+    padding: var(--base-size-4);
+  }
+  .Box-wide-padding--8 {
+    padding: var(--base-size-8);
+  }
+  .Box-wide-padding--12 {
+    padding: var(--base-size-12);
+  }
+  .Box-wide-padding--16 {
+    padding: var(--base-size-16);
+  }
+  .Box-wide-padding--20 {
+    padding: var(--base-size-20);
+  }
+  .Box-wide-padding--24 {
+    padding: var(--base-size-24);
+  }
+  .Box-wide-padding--28 {
+    padding: var(--base-size-28);
+  }
+  .Box-wide-padding--32 {
+    padding: var(--base-size-32);
+  }
+  .Box-wide-padding--36 {
+    padding: var(--base-size-36);
+  }
+  .Box-wide-padding--40 {
+    padding: var(--base-size-40);
+  }
+  .Box-wide-padding--44 {
+    padding: var(--base-size-44);
+  }
+  .Box-wide-padding--48 {
+    padding: var(--base-size-48);
+  }
+  .Box-wide-padding--64 {
+    padding: var(--base-size-64);
+  }
+  .Box-wide-padding--80 {
+    padding: var(--base-size-80);
+  }
+  .Box-wide-padding--96 {
+    padding: var(--base-size-96);
+  }
+  .Box-wide-padding--112 {
+    padding: var(--base-size-112);
+  }
+  .Box-wide-padding--128 {
+    padding: var(--base-size-128);
+  }
+}
+
+/**
+ * 2. Padding Top
+ */
+.Box-paddingBlockStart--condensed {
+  padding-block-start: var(--brand-box-spacing-condensed);
+}
+.Box-paddingBlockStart--normal {
+  padding-block-start: var(--brand-box-spacing-normal);
+}
+.Box-paddingBlockStart--spacious {
+  padding-block-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-paddingBlockStart--none {
+  padding-block-start: 0;
+}
+.Box-paddingBlockStart--4 {
+  padding-block-start: var(--base-size-4);
+}
+.Box-paddingBlockStart--8 {
+  padding-block-start: var(--base-size-8);
+}
+.Box-paddingBlockStart--12 {
+  padding-block-start: var(--base-size-12);
+}
+.Box-paddingBlockStart--16 {
+  padding-block-start: var(--base-size-16);
+}
+.Box-paddingBlockStart--20 {
+  padding-block-start: var(--base-size-20);
+}
+.Box-paddingBlockStart--24 {
+  padding-block-start: var(--base-size-24);
+}
+.Box-paddingBlockStart--28 {
+  padding-block-start: var(--base-size-28);
+}
+.Box-paddingBlockStart--32 {
+  padding-block-start: var(--base-size-32);
+}
+.Box-paddingBlockStart--36 {
+  padding-block-start: var(--base-size-36);
+}
+.Box-paddingBlockStart--40 {
+  padding-block-start: var(--base-size-40);
+}
+.Box-paddingBlockStart--44 {
+  padding-block-start: var(--base-size-44);
+}
+.Box-paddingBlockStart--48 {
+  padding-block-start: var(--base-size-48);
+}
+.Box-paddingBlockStart--64 {
+  padding-block-start: var(--base-size-64);
+}
+.Box-paddingBlockStart--80 {
+  padding-block-start: var(--base-size-80);
+}
+.Box-paddingBlockStart--96 {
+  padding-block-start: var(--base-size-96);
+}
+.Box-paddingBlockStart--112 {
+  padding-block-start: var(--base-size-112);
+}
+.Box-paddingBlockStart--128 {
+  padding-block-start: var(--base-size-128);
+}
+
+.Box-narrow-paddingBlockStart--condensed {
+  padding-block-start: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-paddingBlockStart--normal {
+  padding-block-start: var(--brand-box-spacing-normal);
+}
+.Box-narrow-paddingBlockStart--spacious {
+  padding-block-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-paddingBlockStart--none {
+  padding-block-start: 0;
+}
+
+.Box-narrow-paddingBlockStart--4 {
+  padding-block-start: var(--base-size-4);
+}
+.Box-narrow-paddingBlockStart--8 {
+  padding-block-start: var(--base-size-8);
+}
+.Box-narrow-paddingBlockStart--12 {
+  padding-block-start: var(--base-size-12);
+}
+.Box-narrow-paddingBlockStart--16 {
+  padding-block-start: var(--base-size-16);
+}
+.Box-narrow-paddingBlockStart--20 {
+  padding-block-start: var(--base-size-20);
+}
+.Box-narrow-paddingBlockStart--24 {
+  padding-block-start: var(--base-size-24);
+}
+.Box-narrow-paddingBlockStart--28 {
+  padding-block-start: var(--base-size-28);
+}
+.Box-narrow-paddingBlockStart--32 {
+  padding-block-start: var(--base-size-32);
+}
+.Box-narrow-paddingBlockStart--36 {
+  padding-block-start: var(--base-size-36);
+}
+.Box-narrow-paddingBlockStart--40 {
+  padding-block-start: var(--base-size-40);
+}
+.Box-narrow-paddingBlockStart--44 {
+  padding-block-start: var(--base-size-44);
+}
+.Box-narrow-paddingBlockStart--48 {
+  padding-block-start: var(--base-size-48);
+}
+.Box-narrow-paddingBlockStart--64 {
+  padding-block-start: var(--base-size-64);
+}
+.Box-narrow-paddingBlockStart--80 {
+  padding-block-start: var(--base-size-80);
+}
+.Box-narrow-paddingBlockStart--96 {
+  padding-block-start: var(--base-size-96);
+}
+.Box-narrow-paddingBlockStart--112 {
+  padding-block-start: var(--base-size-112);
+}
+.Box-narrow-paddingBlockStart--128 {
+  padding-block-start: var(--base-size-128);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-paddingBlockStart--condensed {
+    padding-block-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-paddingBlockStart--normal {
+    padding-block-start: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-paddingBlockStart--spacious {
+    padding-block-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-paddingBlockStart--none {
+    padding-block-start: 0;
+  }
+  .Box-regular-paddingBlockStart--4 {
+    padding-block-start: var(--base-size-4);
+  }
+  .Box-regular-paddingBlockStart--8 {
+    padding-block-start: var(--base-size-8);
+  }
+  .Box-regular-paddingBlockStart--12 {
+    padding-block-start: var(--base-size-12);
+  }
+  .Box-regular-paddingBlockStart--16 {
+    padding-block-start: var(--base-size-16);
+  }
+  .Box-regular-paddingBlockStart--20 {
+    padding-block-start: var(--base-size-20);
+  }
+  .Box-regular-paddingBlockStart--24 {
+    padding-block-start: var(--base-size-24);
+  }
+  .Box-regular-paddingBlockStart--28 {
+    padding-block-start: var(--base-size-28);
+  }
+  .Box-regular-paddingBlockStart--32 {
+    padding-block-start: var(--base-size-32);
+  }
+  .Box-regular-paddingBlockStart--36 {
+    padding-block-start: var(--base-size-36);
+  }
+  .Box-regular-paddingBlockStart--40 {
+    padding-block-start: var(--base-size-40);
+  }
+  .Box-regular-paddingBlockStart--44 {
+    padding-block-start: var(--base-size-44);
+  }
+  .Box-regular-paddingBlockStart--48 {
+    padding-block-start: var(--base-size-48);
+  }
+  .Box-regular-paddingBlockStart--64 {
+    padding-block-start: var(--base-size-64);
+  }
+  .Box-regular-paddingBlockStart--80 {
+    padding-block-start: var(--base-size-80);
+  }
+  .Box-regular-paddingBlockStart--96 {
+    padding-block-start: var(--base-size-96);
+  }
+  .Box-regular-paddingBlockStart--112 {
+    padding-block-start: var(--base-size-112);
+  }
+  .Box-regular-paddingBlockStart--128 {
+    padding-block-start: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-paddingBlockStart--condensed {
+    padding-block-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-paddingBlockStart--normal {
+    padding-block-start: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-paddingBlockStart--spacious {
+    padding-block-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-paddingBlockStart--none {
+    padding-block-start: 0;
+  }
+  .Box-wide-paddingBlockStart--4 {
+    padding-block-start: var(--base-size-4);
+  }
+  .Box-wide-paddingBlockStart--8 {
+    padding-block-start: var(--base-size-8);
+  }
+  .Box-wide-paddingBlockStart--12 {
+    padding-block-start: var(--base-size-12);
+  }
+  .Box-wide-paddingBlockStart--16 {
+    padding-block-start: var(--base-size-16);
+  }
+  .Box-wide-paddingBlockStart--20 {
+    padding-block-start: var(--base-size-20);
+  }
+  .Box-wide-paddingBlockStart--24 {
+    padding-block-start: var(--base-size-24);
+  }
+  .Box-wide-paddingBlockStart--28 {
+    padding-block-start: var(--base-size-28);
+  }
+  .Box-wide-paddingBlockStart--32 {
+    padding-block-start: var(--base-size-32);
+  }
+  .Box-wide-paddingBlockStart--36 {
+    padding-block-start: var(--base-size-36);
+  }
+  .Box-wide-paddingBlockStart--40 {
+    padding-block-start: var(--base-size-40);
+  }
+  .Box-wide-paddingBlockStart--44 {
+    padding-block-start: var(--base-size-44);
+  }
+  .Box-wide-paddingBlockStart--48 {
+    padding-block-start: var(--base-size-48);
+  }
+  .Box-wide-paddingBlockStart--64 {
+    padding-block-start: var(--base-size-64);
+  }
+  .Box-wide-paddingBlockStart--80 {
+    padding-block-start: var(--base-size-80);
+  }
+  .Box-wide-paddingBlockStart--96 {
+    padding-block-start: var(--base-size-96);
+  }
+  .Box-wide-paddingBlockStart--112 {
+    padding-block-start: var(--base-size-112);
+  }
+  .Box-wide-paddingBlockStart--128 {
+    padding-block-start: var(--base-size-128);
+  }
+}
+
+/**
+ * 3. Padding Right
+ */
+.Box-paddingInlineEnd--condensed {
+  padding-inline-end: var(--brand-box-spacing-condensed);
+}
+.Box-paddingInlineEnd--normal {
+  padding-inline-end: var(--brand-box-spacing-normal);
+}
+.Box-paddingInlineEnd--spacious {
+  padding-inline-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-paddingInlineEnd--none {
+  padding-inline-end: 0;
+}
+.Box-paddingInlineEnd--4 {
+  padding-inline-end: var(--base-size-4);
+}
+.Box-paddingInlineEnd--8 {
+  padding-inline-end: var(--base-size-8);
+}
+.Box-paddingInlineEnd--12 {
+  padding-inline-end: var(--base-size-12);
+}
+.Box-paddingInlineEnd--16 {
+  padding-inline-end: var(--base-size-16);
+}
+.Box-paddingInlineEnd--20 {
+  padding-inline-end: var(--base-size-20);
+}
+.Box-paddingInlineEnd--24 {
+  padding-inline-end: var(--base-size-24);
+}
+.Box-paddingInlineEnd--28 {
+  padding-inline-end: var(--base-size-28);
+}
+.Box-paddingInlineEnd--32 {
+  padding-inline-end: var(--base-size-32);
+}
+.Box-paddingInlineEnd--36 {
+  padding-inline-end: var(--base-size-36);
+}
+.Box-paddingInlineEnd--40 {
+  padding-inline-end: var(--base-size-40);
+}
+.Box-paddingInlineEnd--44 {
+  padding-inline-end: var(--base-size-44);
+}
+.Box-paddingInlineEnd--48 {
+  padding-inline-end: var(--base-size-48);
+}
+.Box-paddingInlineEnd--64 {
+  padding-inline-end: var(--base-size-64);
+}
+.Box-paddingInlineEnd--80 {
+  padding-inline-end: var(--base-size-80);
+}
+.Box-paddingInlineEnd--96 {
+  padding-inline-end: var(--base-size-96);
+}
+.Box-paddingInlineEnd--112 {
+  padding-inline-end: var(--base-size-112);
+}
+.Box-paddingInlineEnd--128 {
+  padding-inline-end: var(--base-size-128);
+}
+
+.Box-narrow-paddingInlineEnd--condensed {
+  padding-inline-end: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-paddingInlineEnd--normal {
+  padding-inline-end: var(--brand-box-spacing-normal);
+}
+.Box-narrow-paddingInlineEnd--spacious {
+  padding-inline-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-paddingInlineEnd--none {
+  padding-inline-end: 0;
+}
+.Box-narrow-paddingInlineEnd--4 {
+  padding-inline-end: var(--base-size-4);
+}
+.Box-narrow-paddingInlineEnd--8 {
+  padding-inline-end: var(--base-size-8);
+}
+.Box-narrow-paddingInlineEnd--12 {
+  padding-inline-end: var(--base-size-12);
+}
+.Box-narrow-paddingInlineEnd--16 {
+  padding-inline-end: var(--base-size-16);
+}
+.Box-narrow-paddingInlineEnd--20 {
+  padding-inline-end: var(--base-size-20);
+}
+.Box-narrow-paddingInlineEnd--24 {
+  padding-inline-end: var(--base-size-24);
+}
+.Box-narrow-paddingInlineEnd--28 {
+  padding-inline-end: var(--base-size-28);
+}
+.Box-narrow-paddingInlineEnd--32 {
+  padding-inline-end: var(--base-size-32);
+}
+.Box-narrow-paddingInlineEnd--36 {
+  padding-inline-end: var(--base-size-36);
+}
+.Box-narrow-paddingInlineEnd--40 {
+  padding-inline-end: var(--base-size-40);
+}
+.Box-narrow-paddingInlineEnd--44 {
+  padding-inline-end: var(--base-size-44);
+}
+.Box-narrow-paddingInlineEnd--48 {
+  padding-inline-end: var(--base-size-48);
+}
+.Box-narrow-paddingInlineEnd--64 {
+  padding-inline-end: var(--base-size-64);
+}
+.Box-narrow-paddingInlineEnd--80 {
+  padding-inline-end: var(--base-size-80);
+}
+.Box-narrow-paddingInlineEnd--96 {
+  padding-inline-end: var(--base-size-96);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-paddingInlineEnd--condensed {
+    padding-inline-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-paddingInlineEnd--normal {
+    padding-inline-end: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-paddingInlineEnd--spacious {
+    padding-inline-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-paddingInlineEnd--none {
+    padding-inline-end: 0;
+  }
+  .Box-regular-paddingInlineEnd--4 {
+    padding-inline-end: var(--base-size-4);
+  }
+  .Box-regular-paddingInlineEnd--8 {
+    padding-inline-end: var(--base-size-8);
+  }
+  .Box-regular-paddingInlineEnd--12 {
+    padding-inline-end: var(--base-size-12);
+  }
+  .Box-regular-paddingInlineEnd--16 {
+    padding-inline-end: var(--base-size-16);
+  }
+  .Box-regular-paddingInlineEnd--20 {
+    padding-inline-end: var(--base-size-20);
+  }
+  .Box-regular-paddingInlineEnd--24 {
+    padding-inline-end: var(--base-size-24);
+  }
+  .Box-regular-paddingInlineEnd--28 {
+    padding-inline-end: var(--base-size-28);
+  }
+  .Box-regular-paddingInlineEnd--32 {
+    padding-inline-end: var(--base-size-32);
+  }
+  .Box-regular-paddingInlineEnd--36 {
+    padding-inline-end: var(--base-size-36);
+  }
+  .Box-regular-paddingInlineEnd--40 {
+    padding-inline-end: var(--base-size-40);
+  }
+  .Box-regular-paddingInlineEnd--44 {
+    padding-inline-end: var(--base-size-44);
+  }
+  .Box-regular-paddingInlineEnd--48 {
+    padding-inline-end: var(--base-size-48);
+  }
+  .Box-regular-paddingInlineEnd--64 {
+    padding-inline-end: var(--base-size-64);
+  }
+  .Box-regular-paddingInlineEnd--80 {
+    padding-inline-end: var(--base-size-80);
+  }
+  .Box-regular-paddingInlineEnd--96 {
+    padding-inline-end: var(--base-size-96);
+  }
+  .Box-regular-paddingInlineEnd--112 {
+    padding-inline-end: var(--base-size-112);
+  }
+  .Box-regular-paddingInlineEnd--128 {
+    padding-inline-end: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-paddingInlineEnd--condensed {
+    padding-inline-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-paddingInlineEnd--normal {
+    padding-inline-end: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-paddingInlineEnd--spacious {
+    padding-inline-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-paddingInlineEnd--none {
+    padding-inline-end: 0;
+  }
+  .Box-wide-paddingInlineEnd--4 {
+    padding-inline-end: var(--base-size-4);
+  }
+  .Box-wide-paddingInlineEnd--8 {
+    padding-inline-end: var(--base-size-8);
+  }
+  .Box-wide-paddingInlineEnd--12 {
+    padding-inline-end: var(--base-size-12);
+  }
+  .Box-wide-paddingInlineEnd--16 {
+    padding-inline-end: var(--base-size-16);
+  }
+  .Box-wide-paddingInlineEnd--20 {
+    padding-inline-end: var(--base-size-20);
+  }
+  .Box-wide-paddingInlineEnd--24 {
+    padding-inline-end: var(--base-size-24);
+  }
+  .Box-wide-paddingInlineEnd--28 {
+    padding-inline-end: var(--base-size-28);
+  }
+  .Box-wide-paddingInlineEnd--32 {
+    padding-inline-end: var(--base-size-32);
+  }
+  .Box-wide-paddingInlineEnd--36 {
+    padding-inline-end: var(--base-size-36);
+  }
+  .Box-wide-paddingInlineEnd--40 {
+    padding-inline-end: var(--base-size-40);
+  }
+  .Box-wide-paddingInlineEnd--44 {
+    padding-inline-end: var(--base-size-44);
+  }
+  .Box-wide-paddingInlineEnd--48 {
+    padding-inline-end: var(--base-size-48);
+  }
+  .Box-wide-paddingInlineEnd--64 {
+    padding-inline-end: var(--base-size-64);
+  }
+  .Box-wide-paddingInlineEnd--80 {
+    padding-inline-end: var(--base-size-80);
+  }
+  .Box-wide-paddingInlineEnd--96 {
+    padding-inline-end: var(--base-size-96);
+  }
+  .Box-wide-paddingInlineEnd--112 {
+    padding-inline-end: var(--base-size-112);
+  }
+  .Box-wide-paddingInlineEnd--128 {
+    padding-inline-end: var(--base-size-128);
+  }
+}
+/**
+ * 4. Padding bottom
+ */
+.Box-paddingBlockEnd--condensed {
+  padding-block-end: var(--brand-box-spacing-condensed);
+}
+.Box-paddingBlockEnd--normal {
+  padding-block-end: var(--brand-box-spacing-normal);
+}
+.Box-paddingBlockEnd--spacious {
+  padding-block-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-paddingBlockEnd--none {
+  padding-block-end: 0;
+}
+.Box-paddingBlockEnd--4 {
+  padding-block-end: var(--base-size-4);
+}
+.Box-paddingBlockEnd--8 {
+  padding-block-end: var(--base-size-8);
+}
+.Box-paddingBlockEnd--12 {
+  padding-block-end: var(--base-size-12);
+}
+.Box-paddingBlockEnd--16 {
+  padding-block-end: var(--base-size-16);
+}
+.Box-paddingBlockEnd--20 {
+  padding-block-end: var(--base-size-20);
+}
+.Box-paddingBlockEnd--24 {
+  padding-block-end: var(--base-size-24);
+}
+.Box-paddingBlockEnd--28 {
+  padding-block-end: var(--base-size-28);
+}
+.Box-paddingBlockEnd--32 {
+  padding-block-end: var(--base-size-32);
+}
+.Box-paddingBlockEnd--36 {
+  padding-block-end: var(--base-size-36);
+}
+.Box-paddingBlockEnd--40 {
+  padding-block-end: var(--base-size-40);
+}
+.Box-paddingBlockEnd--44 {
+  padding-block-end: var(--base-size-44);
+}
+.Box-paddingBlockEnd--48 {
+  padding-block-end: var(--base-size-48);
+}
+.Box-paddingBlockEnd--64 {
+  padding-block-end: var(--base-size-64);
+}
+.Box-paddingBlockEnd--80 {
+  padding-block-end: var(--base-size-80);
+}
+.Box-paddingBlockEnd--96 {
+  padding-block-end: var(--base-size-96);
+}
+.Box-paddingBlockEnd--112 {
+  padding-block-end: var(--base-size-112);
+}
+.Box-paddingBlockEnd--128 {
+  padding-block-end: var(--base-size-128);
+}
+
+.Box-narrow-paddingBlockEnd--condensed {
+  padding-block-end: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-paddingBlockEnd--normal {
+  padding-block-end: var(--brand-box-spacing-normal);
+}
+.Box-narrow-paddingBlockEnd--spacious {
+  padding-block-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-paddingBlockEnd--none {
+  padding-block-end: 0;
+}
+.Box-narrow-paddingBlockEnd--4 {
+  padding-block-end: var(--base-size-4);
+}
+.Box-narrow-paddingBlockEnd--8 {
+  padding-block-end: var(--base-size-8);
+}
+.Box-narrow-paddingBlockEnd--12 {
+  padding-block-end: var(--base-size-12);
+}
+.Box-narrow-paddingBlockEnd--16 {
+  padding-block-end: var(--base-size-16);
+}
+.Box-narrow-paddingBlockEnd--20 {
+  padding-block-end: var(--base-size-20);
+}
+.Box-narrow-paddingBlockEnd--24 {
+  padding-block-end: var(--base-size-24);
+}
+.Box-narrow-paddingBlockEnd--28 {
+  padding-block-end: var(--base-size-28);
+}
+.Box-narrow-paddingBlockEnd--32 {
+  padding-block-end: var(--base-size-32);
+}
+.Box-narrow-paddingBlockEnd--36 {
+  padding-block-end: var(--base-size-36);
+}
+.Box-narrow-paddingBlockEnd--40 {
+  padding-block-end: var(--base-size-40);
+}
+.Box-narrow-paddingBlockEnd--44 {
+  padding-block-end: var(--base-size-44);
+}
+.Box-narrow-paddingBlockEnd--48 {
+  padding-block-end: var(--base-size-48);
+}
+.Box-narrow-paddingBlockEnd--64 {
+  padding-block-end: var(--base-size-64);
+}
+.Box-narrow-paddingBlockEnd--80 {
+  padding-block-end: var(--base-size-80);
+}
+.Box-narrow-paddingBlockEnd--96 {
+  padding-block-end: var(--base-size-96);
+}
+.Box-narrow-paddingBlockEnd--112 {
+  padding-block-end: var(--base-size-112);
+}
+.Box-narrow-paddingBlockEnd--128 {
+  padding-block-end: var(--base-size-128);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-paddingBlockEnd--condensed {
+    padding-block-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-paddingBlockEnd--normal {
+    padding-block-end: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-paddingBlockEnd--spacious {
+    padding-block-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-paddingBlockEnd--none {
+    padding-block-end: 0;
+  }
+  .Box-regular-paddingBlockEnd--4 {
+    padding-block-end: var(--base-size-4);
+  }
+  .Box-regular-paddingBlockEnd--8 {
+    padding-block-end: var(--base-size-8);
+  }
+  .Box-regular-paddingBlockEnd--12 {
+    padding-block-end: var(--base-size-12);
+  }
+  .Box-regular-paddingBlockEnd--16 {
+    padding-block-end: var(--base-size-16);
+  }
+  .Box-regular-paddingBlockEnd--20 {
+    padding-block-end: var(--base-size-20);
+  }
+  .Box-regular-paddingBlockEnd--24 {
+    padding-block-end: var(--base-size-24);
+  }
+  .Box-regular-paddingBlockEnd--28 {
+    padding-block-end: var(--base-size-28);
+  }
+  .Box-regular-paddingBlockEnd--32 {
+    padding-block-end: var(--base-size-32);
+  }
+  .Box-regular-paddingBlockEnd--36 {
+    padding-block-end: var(--base-size-36);
+  }
+  .Box-regular-paddingBlockEnd--40 {
+    padding-block-end: var(--base-size-40);
+  }
+  .Box-regular-paddingBlockEnd--44 {
+    padding-block-end: var(--base-size-44);
+  }
+  .Box-regular-paddingBlockEnd--48 {
+    padding-block-end: var(--base-size-48);
+  }
+  .Box-regular-paddingBlockEnd--64 {
+    padding-block-end: var(--base-size-64);
+  }
+  .Box-regular-paddingBlockEnd--80 {
+    padding-block-end: var(--base-size-80);
+  }
+  .Box-regular-paddingBlockEnd--96 {
+    padding-block-end: var(--base-size-96);
+  }
+  .Box-regular-paddingBlockEnd--112 {
+    padding-block-end: var(--base-size-112);
+  }
+  .Box-regular-paddingBlockEnd--128 {
+    padding-block-end: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-paddingBlockEnd--condensed {
+    padding-block-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-paddingBlockEnd--normal {
+    padding-block-end: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-paddingBlockEnd--spacious {
+    padding-block-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-paddingBlockEnd--none {
+    padding-block-end: 0;
+  }
+  .Box-wide-paddingBlockEnd--4 {
+    padding-block-end: var(--base-size-4);
+  }
+  .Box-wide-paddingBlockEnd--8 {
+    padding-block-end: var(--base-size-8);
+  }
+  .Box-wide-paddingBlockEnd--12 {
+    padding-block-end: var(--base-size-12);
+  }
+  .Box-wide-paddingBlockEnd--16 {
+    padding-block-end: var(--base-size-16);
+  }
+  .Box-wide-paddingBlockEnd--20 {
+    padding-block-end: var(--base-size-20);
+  }
+  .Box-wide-paddingBlockEnd--24 {
+    padding-block-end: var(--base-size-24);
+  }
+  .Box-wide-paddingBlockEnd--28 {
+    padding-block-end: var(--base-size-28);
+  }
+  .Box-wide-paddingBlockEnd--32 {
+    padding-block-end: var(--base-size-32);
+  }
+  .Box-wide-paddingBlockEnd--36 {
+    padding-block-end: var(--base-size-36);
+  }
+  .Box-wide-paddingBlockEnd--40 {
+    padding-block-end: var(--base-size-40);
+  }
+  .Box-wide-paddingBlockEnd--44 {
+    padding-block-end: var(--base-size-44);
+  }
+  .Box-wide-paddingBlockEnd--48 {
+    padding-block-end: var(--base-size-48);
+  }
+  .Box-wide-paddingBlockEnd--64 {
+    padding-block-end: var(--base-size-64);
+  }
+  .Box-wide-paddingBlockEnd--80 {
+    padding-block-end: var(--base-size-80);
+  }
+  .Box-wide-paddingBlockEnd--96 {
+    padding-block-end: var(--base-size-96);
+  }
+  .Box-wide-paddingBlockEnd--112 {
+    padding-block-end: var(--base-size-112);
+  }
+  .Box-wide-paddingBlockEnd--128 {
+    padding-block-end: var(--base-size-128);
+  }
+}
+
+/**
+ * 5. Padding Left
+ */
+.Box-paddingInlineStart--condensed {
+  padding-inline-start: var(--brand-box-spacing-condensed);
+}
+.Box-paddingInlineStart--normal {
+  padding-inline-start: var(--brand-box-spacing-normal);
+}
+.Box-paddingInlineStart--spacious {
+  padding-inline-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-paddingInlineStart--none {
+  padding-inline-start: 0;
+}
+.Box-paddingInlineStart--4 {
+  padding-inline-start: var(--base-size-4);
+}
+.Box-paddingInlineStart--8 {
+  padding-inline-start: var(--base-size-8);
+}
+.Box-paddingInlineStart--12 {
+  padding-inline-start: var(--base-size-12);
+}
+.Box-paddingInlineStart--16 {
+  padding-inline-start: var(--base-size-16);
+}
+.Box-paddingInlineStart--20 {
+  padding-inline-start: var(--base-size-20);
+}
+.Box-paddingInlineStart--24 {
+  padding-inline-start: var(--base-size-24);
+}
+.Box-paddingInlineStart--28 {
+  padding-inline-start: var(--base-size-28);
+}
+.Box-paddingInlineStart--32 {
+  padding-inline-start: var(--base-size-32);
+}
+.Box-paddingInlineStart--36 {
+  padding-inline-start: var(--base-size-36);
+}
+.Box-paddingInlineStart--40 {
+  padding-inline-start: var(--base-size-40);
+}
+.Box-paddingInlineStart--44 {
+  padding-inline-start: var(--base-size-44);
+}
+.Box-paddingInlineStart--48 {
+  padding-inline-start: var(--base-size-48);
+}
+.Box-paddingInlineStart--64 {
+  padding-inline-start: var(--base-size-64);
+}
+.Box-paddingInlineStart--80 {
+  padding-inline-start: var(--base-size-80);
+}
+.Box-paddingInlineStart--96 {
+  padding-inline-start: var(--base-size-96);
+}
+.Box-paddingInlineStart--112 {
+  padding-inline-start: var(--base-size-112);
+}
+.Box-paddingInlineStart--128 {
+  padding-inline-start: var(--base-size-128);
+}
+
+.Box-narrow-paddingInlineStart--condensed {
+  padding-inline-start: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-paddingInlineStart--normal {
+  padding-inline-start: var(--brand-box-spacing-normal);
+}
+.Box-narrow-paddingInlineStart--spacious {
+  padding-inline-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-paddingInlineStart--none {
+  padding-inline-start: 0;
+}
+.Box-narrow-paddingInlineStart--4 {
+  padding-inline-start: var(--base-size-4);
+}
+.Box-narrow-paddingInlineStart--8 {
+  padding-inline-start: var(--base-size-8);
+}
+.Box-narrow-paddingInlineStart--12 {
+  padding-inline-start: var(--base-size-12);
+}
+.Box-narrow-paddingInlineStart--16 {
+  padding-inline-start: var(--base-size-16);
+}
+.Box-narrow-paddingInlineStart--20 {
+  padding-inline-start: var(--base-size-20);
+}
+.Box-narrow-paddingInlineStart--24 {
+  padding-inline-start: var(--base-size-24);
+}
+.Box-narrow-paddingInlineStart--28 {
+  padding-inline-start: var(--base-size-28);
+}
+.Box-narrow-paddingInlineStart--32 {
+  padding-inline-start: var(--base-size-32);
+}
+.Box-narrow-paddingInlineStart--36 {
+  padding-inline-start: var(--base-size-36);
+}
+.Box-narrow-paddingInlineStart--40 {
+  padding-inline-start: var(--base-size-40);
+}
+.Box-narrow-paddingInlineStart--44 {
+  padding-inline-start: var(--base-size-44);
+}
+.Box-narrow-paddingInlineStart--48 {
+  padding-inline-start: var(--base-size-48);
+}
+.Box-narrow-paddingInlineStart--64 {
+  padding-inline-start: var(--base-size-64);
+}
+.Box-narrow-paddingInlineStart--80 {
+  padding-inline-start: var(--base-size-80);
+}
+.Box-narrow-paddingInlineStart--96 {
+  padding-inline-start: var(--base-size-96);
+}
+.Box-narrow-paddingInlineStart--112 {
+  padding-inline-start: var(--base-size-112);
+}
+.Box-narrow-paddingInlineStart--128 {
+  padding-inline-start: var(--base-size-128);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-paddingInlineStart--condensed {
+    padding-inline-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-paddingInlineStart--normal {
+    padding-inline-start: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-paddingInlineStart--spacious {
+    padding-inline-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-paddingInlineStart--none {
+    padding-inline-start: 0;
+  }
+  .Box-regular-paddingInlineStart--4 {
+    padding-inline-start: var(--base-size-4);
+  }
+  .Box-regular-paddingInlineStart--8 {
+    padding-inline-start: var(--base-size-8);
+  }
+  .Box-regular-paddingInlineStart--12 {
+    padding-inline-start: var(--base-size-12);
+  }
+  .Box-regular-paddingInlineStart--16 {
+    padding-inline-start: var(--base-size-16);
+  }
+  .Box-regular-paddingInlineStart--20 {
+    padding-inline-start: var(--base-size-20);
+  }
+  .Box-regular-paddingInlineStart--24 {
+    padding-inline-start: var(--base-size-24);
+  }
+  .Box-regular-paddingInlineStart--28 {
+    padding-inline-start: var(--base-size-28);
+  }
+  .Box-regular-paddingInlineStart--32 {
+    padding-inline-start: var(--base-size-32);
+  }
+  .Box-regular-paddingInlineStart--36 {
+    padding-inline-start: var(--base-size-36);
+  }
+  .Box-regular-paddingInlineStart--40 {
+    padding-inline-start: var(--base-size-40);
+  }
+  .Box-regular-paddingInlineStart--44 {
+    padding-inline-start: var(--base-size-44);
+  }
+  .Box-regular-paddingInlineStart--48 {
+    padding-inline-start: var(--base-size-48);
+  }
+  .Box-regular-paddingInlineStart--64 {
+    padding-inline-start: var(--base-size-64);
+  }
+  .Box-regular-paddingInlineStart--80 {
+    padding-inline-start: var(--base-size-80);
+  }
+  .Box-regular-paddingInlineStart--96 {
+    padding-inline-start: var(--base-size-96);
+  }
+  .Box-regular-paddingInlineStart--112 {
+    padding-inline-start: var(--base-size-112);
+  }
+  .Box-regular-paddingInlineStart--128 {
+    padding-inline-start: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-paddingInlineStart--condensed {
+    padding-inline-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-paddingInlineStart--normal {
+    padding-inline-start: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-paddingInlineStart--spacious {
+    padding-inline-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-paddingInlineStart--none {
+    padding-inline-start: 0;
+  }
+  .Box-wide-paddingInlineStart--4 {
+    padding-inline-start: var(--base-size-4);
+  }
+  .Box-wide-paddingInlineStart--8 {
+    padding-inline-start: var(--base-size-8);
+  }
+  .Box-wide-paddingInlineStart--12 {
+    padding-inline-start: var(--base-size-12);
+  }
+  .Box-wide-paddingInlineStart--16 {
+    padding-inline-start: var(--base-size-16);
+  }
+  .Box-wide-paddingInlineStart--20 {
+    padding-inline-start: var(--base-size-20);
+  }
+  .Box-wide-paddingInlineStart--24 {
+    padding-inline-start: var(--base-size-24);
+  }
+  .Box-wide-paddingInlineStart--28 {
+    padding-inline-start: var(--base-size-28);
+  }
+  .Box-wide-paddingInlineStart--32 {
+    padding-inline-start: var(--base-size-32);
+  }
+  .Box-wide-paddingInlineStart--36 {
+    padding-inline-start: var(--base-size-36);
+  }
+  .Box-wide-paddingInlineStart--40 {
+    padding-inline-start: var(--base-size-40);
+  }
+  .Box-wide-paddingInlineStart--44 {
+    padding-inline-start: var(--base-size-44);
+  }
+  .Box-wide-paddingInlineStart--48 {
+    padding-inline-start: var(--base-size-48);
+  }
+  .Box-wide-paddingInlineStart--64 {
+    padding-inline-start: var(--base-size-64);
+  }
+  .Box-wide-paddingInlineStart--80 {
+    padding-inline-start: var(--base-size-80);
+  }
+  .Box-wide-paddingInlineStart--96 {
+    padding-inline-start: var(--base-size-96);
+  }
+  .Box-wide-paddingInlineStart--112 {
+    padding-inline-start: var(--base-size-112);
+  }
+  .Box-wide-paddingInlineStart--128 {
+    padding-inline-start: var(--base-size-128);
+  }
+}
+
+/**
+ * 6. Margin
+ */
+.Box-margin--condensed {
+  margin: var(--brand-box-spacing-condensed);
+}
+.Box-margin--normal {
+  margin: var(--brand-box-spacing-normal);
+}
+.Box-margin--spacious {
+  margin: var(--brand-box-spacing-spacious);
+}
+
+.Box-margin--none {
+  margin: 0;
+}
+.Box-margin--4 {
+  margin: var(--base-size-4);
+}
+.Box-margin--8 {
+  margin: var(--base-size-8);
+}
+.Box-margin--12 {
+  margin: var(--base-size-12);
+}
+.Box-margin--16 {
+  margin: var(--base-size-16);
+}
+.Box-margin--20 {
+  margin: var(--base-size-20);
+}
+.Box-margin--24 {
+  margin: var(--base-size-24);
+}
+.Box-margin--28 {
+  margin: var(--base-size-28);
+}
+.Box-margin--32 {
+  margin: var(--base-size-32);
+}
+.Box-margin--36 {
+  margin: var(--base-size-36);
+}
+.Box-margin--40 {
+  margin: var(--base-size-40);
+}
+.Box-margin--44 {
+  margin: var(--base-size-44);
+}
+.Box-margin--48 {
+  margin: var(--base-size-48);
+}
+.Box-margin--64 {
+  margin: var(--base-size-64);
+}
+.Box-margin--80 {
+  margin: var(--base-size-80);
+}
+.Box-margin--96 {
+  margin: var(--base-size-96);
+}
+.Box-margin--112 {
+  margin: var(--base-size-112);
+}
+.Box-margin--128 {
+  margin: var(--base-size-128);
+}
+.Box-narrow-margin--condensed {
+  margin: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-margin--normal {
+  margin: var(--brand-box-spacing-normal);
+}
+.Box-narrow-margin--spacious {
+  margin: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-margin--none {
+  margin: 0;
+}
+.Box-narrow-margin--4 {
+  margin: var(--base-size-4);
+}
+.Box-narrow-margin--8 {
+  margin: var(--base-size-8);
+}
+.Box-narrow-margin--12 {
+  margin: var(--base-size-12);
+}
+.Box-narrow-margin--16 {
+  margin: var(--base-size-16);
+}
+.Box-narrow-margin--20 {
+  margin: var(--base-size-20);
+}
+.Box-narrow-margin--24 {
+  margin: var(--base-size-24);
+}
+.Box-narrow-margin--28 {
+  margin: var(--base-size-28);
+}
+.Box-narrow-margin--32 {
+  margin: var(--base-size-32);
+}
+.Box-narrow-margin--36 {
+  margin: var(--base-size-36);
+}
+.Box-narrow-margin--40 {
+  margin: var(--base-size-40);
+}
+.Box-narrow-margin--44 {
+  margin: var(--base-size-44);
+}
+.Box-narrow-margin--48 {
+  margin: var(--base-size-48);
+}
+.Box-narrow-margin--64 {
+  margin: var(--base-size-64);
+}
+.Box-narrow-margin--80 {
+  margin: var(--base-size-80);
+}
+.Box-narrow-margin--96 {
+  margin: var(--base-size-96);
+}
+.Box-narrow-margin--112 {
+  margin: var(--base-size-112);
+}
+.Box-narrow-margin--128 {
+  margin: var(--base-size-128);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-margin--condensed {
+    margin: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-margin--normal {
+    margin: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-margin--spacious {
+    margin: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-margin--none {
+    margin: 0;
+  }
+  .Box-regular-margin--4 {
+    margin: var(--base-size-4);
+  }
+  .Box-regular-margin--8 {
+    margin: var(--base-size-8);
+  }
+  .Box-regular-margin--12 {
+    margin: var(--base-size-12);
+  }
+  .Box-regular-margin--16 {
+    margin: var(--base-size-16);
+  }
+  .Box-regular-margin--20 {
+    margin: var(--base-size-20);
+  }
+  .Box-regular-margin--24 {
+    margin: var(--base-size-24);
+  }
+  .Box-regular-margin--28 {
+    margin: var(--base-size-28);
+  }
+  .Box-regular-margin--32 {
+    margin: var(--base-size-32);
+  }
+  .Box-regular-margin--36 {
+    margin: var(--base-size-36);
+  }
+  .Box-regular-margin--40 {
+    margin: var(--base-size-40);
+  }
+  .Box-regular-margin--44 {
+    margin: var(--base-size-44);
+  }
+  .Box-regular-margin--48 {
+    margin: var(--base-size-48);
+  }
+  .Box-regular-margin--64 {
+    margin: var(--base-size-64);
+  }
+  .Box-regular-margin--80 {
+    margin: var(--base-size-80);
+  }
+  .Box-regular-margin--96 {
+    margin: var(--base-size-96);
+  }
+  .Box-regular-margin--112 {
+    margin: var(--base-size-112);
+  }
+  .Box-regular-margin--128 {
+    margin: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-margin--condensed {
+    margin: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-margin--normal {
+    margin: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-margin--spacious {
+    margin: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-margin--none {
+    margin: 0;
+  }
+  .Box-wide-margin--4 {
+    margin: var(--base-size-4);
+  }
+  .Box-wide-margin--8 {
+    margin: var(--base-size-8);
+  }
+  .Box-wide-margin--12 {
+    margin: var(--base-size-12);
+  }
+  .Box-wide-margin--16 {
+    margin: var(--base-size-16);
+  }
+  .Box-wide-margin--20 {
+    margin: var(--base-size-20);
+  }
+  .Box-wide-margin--24 {
+    margin: var(--base-size-24);
+  }
+  .Box-wide-margin--28 {
+    margin: var(--base-size-28);
+  }
+  .Box-wide-margin--32 {
+    margin: var(--base-size-32);
+  }
+  .Box-wide-margin--36 {
+    margin: var(--base-size-36);
+  }
+  .Box-wide-margin--40 {
+    margin: var(--base-size-40);
+  }
+  .Box-wide-margin--44 {
+    margin: var(--base-size-44);
+  }
+  .Box-wide-margin--48 {
+    margin: var(--base-size-48);
+  }
+  .Box-wide-margin--64 {
+    margin: var(--base-size-64);
+  }
+  .Box-wide-margin--80 {
+    margin: var(--base-size-80);
+  }
+  .Box-wide-margin--112 {
+    margin: var(--base-size-112);
+  }
+  .Box-wide-margin--128 {
+    margin: var(--base-size-128);
+  }
+}
+
+/**
+ * 7. Margin Top
+ */
+.Box-marginBlockStart--condensed {
+  margin-block-start: var(--brand-box-spacing-condensed);
+}
+.Box-marginBlockStart--normal {
+  margin-block-start: var(--brand-box-spacing-normal);
+}
+.Box-marginBlockStart--spacious {
+  margin-block-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-marginBlockStart--none {
+  margin-block-start: 0;
+}
+.Box-marginBlockStart--4 {
+  margin-block-start: var(--base-size-4);
+}
+.Box-marginBlockStart--8 {
+  margin-block-start: var(--base-size-8);
+}
+.Box-marginBlockStart--12 {
+  margin-block-start: var(--base-size-12);
+}
+.Box-marginBlockStart--16 {
+  margin-block-start: var(--base-size-16);
+}
+.Box-marginBlockStart--20 {
+  margin-block-start: var(--base-size-20);
+}
+.Box-marginBlockStart--24 {
+  margin-block-start: var(--base-size-24);
+}
+.Box-marginBlockStart--28 {
+  margin-block-start: var(--base-size-28);
+}
+.Box-marginBlockStart--32 {
+  margin-block-start: var(--base-size-32);
+}
+.Box-marginBlockStart--36 {
+  margin-block-start: var(--base-size-36);
+}
+.Box-marginBlockStart--40 {
+  margin-block-start: var(--base-size-40);
+}
+.Box-marginBlockStart--44 {
+  margin-block-start: var(--base-size-44);
+}
+.Box-marginBlockStart--48 {
+  margin-block-start: var(--base-size-48);
+}
+.Box-marginBlockStart--64 {
+  margin-block-start: var(--base-size-64);
+}
+.Box-marginBlockStart--80 {
+  margin-block-start: var(--base-size-80);
+}
+.Box-marginBlockStart--96 {
+  margin-block-start: var(--base-size-96);
+}
+.Box-marginBlockStart--112 {
+  margin-block-start: var(--base-size-112);
+}
+.Box-marginBlockStart--128 {
+  margin-block-start: var(--base-size-128);
+}
+
+.Box-narrow-marginBlockStart--condensed {
+  margin-block-start: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-marginBlockStart--normal {
+  margin-block-start: var(--brand-box-spacing-normal);
+}
+.Box-narrow-marginBlockStart--spacious {
+  margin-block-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-marginBlockStart--none {
+  margin-block-start: 0;
+}
+.Box-narrow-marginBlockStart--4 {
+  margin-block-start: var(--base-size-4);
+}
+.Box-narrow-marginBlockStart--8 {
+  margin-block-start: var(--base-size-8);
+}
+.Box-narrow-marginBlockStart--12 {
+  margin-block-start: var(--base-size-12);
+}
+.Box-narrow-marginBlockStart--16 {
+  margin-block-start: var(--base-size-16);
+}
+.Box-narrow-marginBlockStart--20 {
+  margin-block-start: var(--base-size-20);
+}
+.Box-narrow-marginBlockStart--24 {
+  margin-block-start: var(--base-size-24);
+}
+.Box-narrow-marginBlockStart--28 {
+  margin-block-start: var(--base-size-28);
+}
+.Box-narrow-marginBlockStart--32 {
+  margin-block-start: var(--base-size-32);
+}
+.Box-narrow-marginBlockStart--36 {
+  margin-block-start: var(--base-size-36);
+}
+.Box-narrow-marginBlockStart--40 {
+  margin-block-start: var(--base-size-40);
+}
+.Box-narrow-marginBlockStart--44 {
+  margin-block-start: var(--base-size-44);
+}
+.Box-narrow-marginBlockStart--48 {
+  margin-block-start: var(--base-size-48);
+}
+.Box-narrow-marginBlockStart--64 {
+  margin-block-start: var(--base-size-64);
+}
+.Box-narrow-marginBlockStart--80 {
+  margin-block-start: var(--base-size-80);
+}
+.Box-narrow-marginBlockStart--96 {
+  margin-block-start: var(--base-size-96);
+}
+.Box-narrow-marginBlockStart--112 {
+  margin-block-start: var(--base-size-112);
+}
+.Box-narrow-marginBlockStart--128 {
+  margin-block-start: var(--base-size-128);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-marginBlockStart--condensed {
+    margin-block-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-marginBlockStart--normal {
+    margin-block-start: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-marginBlockStart--spacious {
+    margin-block-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-marginBlockStart--none {
+    margin-block-start: 0;
+  }
+  .Box-regular-marginBlockStart--4 {
+    margin-block-start: var(--base-size-4);
+  }
+  .Box-regular-marginBlockStart--8 {
+    margin-block-start: var(--base-size-8);
+  }
+  .Box-regular-marginBlockStart--12 {
+    margin-block-start: var(--base-size-12);
+  }
+  .Box-regular-marginBlockStart--16 {
+    margin-block-start: var(--base-size-16);
+  }
+  .Box-regular-marginBlockStart--20 {
+    margin-block-start: var(--base-size-20);
+  }
+  .Box-regular-marginBlockStart--24 {
+    margin-block-start: var(--base-size-24);
+  }
+  .Box-regular-marginBlockStart--28 {
+    margin-block-start: var(--base-size-28);
+  }
+  .Box-regular-marginBlockStart--32 {
+    margin-block-start: var(--base-size-32);
+  }
+  .Box-regular-marginBlockStart--36 {
+    margin-block-start: var(--base-size-36);
+  }
+  .Box-regular-marginBlockStart--40 {
+    margin-block-start: var(--base-size-40);
+  }
+  .Box-regular-marginBlockStart--44 {
+    margin-block-start: var(--base-size-44);
+  }
+  .Box-regular-marginBlockStart--48 {
+    margin-block-start: var(--base-size-48);
+  }
+  .Box-regular-marginBlockStart--64 {
+    margin-block-start: var(--base-size-64);
+  }
+  .Box-regular-marginBlockStart--80 {
+    margin-block-start: var(--base-size-80);
+  }
+  .Box-regular-marginBlockStart--96 {
+    margin-block-start: var(--base-size-96);
+  }
+  .Box-regular-marginBlockStart--112 {
+    margin-block-start: var(--base-size-112);
+  }
+  .Box-regular-marginBlockStart--128 {
+    margin-block-start: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-marginBlockStart--condensed {
+    margin-block-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-marginBlockStart--normal {
+    margin-block-start: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-marginBlockStart--spacious {
+    margin-block-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-marginBlockStart--none {
+    margin-block-start: 0;
+  }
+  .Box-wide-marginBlockStart--4 {
+    margin-block-start: var(--base-size-4);
+  }
+  .Box-wide-marginBlockStart--8 {
+    margin-block-start: var(--base-size-8);
+  }
+  .Box-wide-marginBlockStart--12 {
+    margin-block-start: var(--base-size-12);
+  }
+  .Box-wide-marginBlockStart--16 {
+    margin-block-start: var(--base-size-16);
+  }
+  .Box-wide-marginBlockStart--20 {
+    margin-block-start: var(--base-size-20);
+  }
+  .Box-wide-marginBlockStart--24 {
+    margin-block-start: var(--base-size-24);
+  }
+  .Box-wide-marginBlockStart--28 {
+    margin-block-start: var(--base-size-28);
+  }
+  .Box-wide-marginBlockStart--32 {
+    margin-block-start: var(--base-size-32);
+  }
+  .Box-wide-marginBlockStart--36 {
+    margin-block-start: var(--base-size-36);
+  }
+  .Box-wide-marginBlockStart--40 {
+    margin-block-start: var(--base-size-40);
+  }
+  .Box-wide-marginBlockStart--44 {
+    margin-block-start: var(--base-size-44);
+  }
+  .Box-wide-marginBlockStart--48 {
+    margin-block-start: var(--base-size-48);
+  }
+  .Box-wide-marginBlockStart--64 {
+    margin-block-start: var(--base-size-64);
+  }
+  .Box-wide-marginBlockStart--80 {
+    margin-block-start: var(--base-size-80);
+  }
+  .Box-wide-marginBlockStart--96 {
+    margin-block-start: var(--base-size-96);
+  }
+  .Box-wide-marginBlockStart--112 {
+    margin-block-start: var(--base-size-112);
+  }
+  .Box-wide-marginBlockStart--128 {
+    margin-block-start: var(--base-size-128);
+  }
+}
+
+/**
+ * 8. Margin Right
+ */
+.Box-marginInlineEnd--condensed {
+  margin-inline-end: var(--brand-box-spacing-condensed);
+}
+.Box-marginInlineEnd--normal {
+  margin-inline-end: var(--brand-box-spacing-normal);
+}
+.Box-marginInlineEnd--spacious {
+  margin-inline-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-marginInlineEnd--none {
+  margin-inline-end: 0;
+}
+.Box-marginInlineEnd--4 {
+  margin-inline-end: var(--base-size-4);
+}
+.Box-marginInlineEnd--8 {
+  margin-inline-end: var(--base-size-8);
+}
+.Box-marginInlineEnd--12 {
+  margin-inline-end: var(--base-size-12);
+}
+.Box-marginInlineEnd--16 {
+  margin-inline-end: var(--base-size-16);
+}
+.Box-marginInlineEnd--20 {
+  margin-inline-end: var(--base-size-20);
+}
+.Box-marginInlineEnd--24 {
+  margin-inline-end: var(--base-size-24);
+}
+.Box-marginInlineEnd--28 {
+  margin-inline-end: var(--base-size-28);
+}
+.Box-marginInlineEnd--32 {
+  margin-inline-end: var(--base-size-32);
+}
+.Box-marginInlineEnd--36 {
+  margin-inline-end: var(--base-size-36);
+}
+.Box-marginInlineEnd--40 {
+  margin-inline-end: var(--base-size-40);
+}
+.Box-marginInlineEnd--44 {
+  margin-inline-end: var(--base-size-44);
+}
+.Box-marginInlineEnd--48 {
+  margin-inline-end: var(--base-size-48);
+}
+.Box-marginInlineEnd--64 {
+  margin-inline-end: var(--base-size-64);
+}
+.Box-marginInlineEnd--80 {
+  margin-inline-end: var(--base-size-80);
+}
+.Box-marginInlineEnd--96 {
+  margin-inline-end: var(--base-size-96);
+}
+.Box-marginInlineEnd--112 {
+  margin-inline-end: var(--base-size-112);
+}
+.Box-marginInlineEnd--128 {
+  margin-inline-end: var(--base-size-128);
+}
+
+.Box-narrow-marginInlineEnd--condensed {
+  margin-inline-end: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-marginInlineEnd--normal {
+  margin-inline-end: var(--brand-box-spacing-normal);
+}
+.Box-narrow-marginInlineEnd--spacious {
+  margin-inline-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-marginInlineEnd--none {
+  margin-inline-end: 0;
+}
+.Box-narrow-marginInlineEnd--4 {
+  margin-inline-end: var(--base-size-4);
+}
+.Box-narrow-marginInlineEnd--8 {
+  margin-inline-end: var(--base-size-8);
+}
+.Box-narrow-marginInlineEnd--12 {
+  margin-inline-end: var(--base-size-12);
+}
+.Box-narrow-marginInlineEnd--16 {
+  margin-inline-end: var(--base-size-16);
+}
+.Box-narrow-marginInlineEnd--20 {
+  margin-inline-end: var(--base-size-20);
+}
+.Box-narrow-marginInlineEnd--24 {
+  margin-inline-end: var(--base-size-24);
+}
+.Box-narrow-marginInlineEnd--28 {
+  margin-inline-end: var(--base-size-28);
+}
+.Box-narrow-marginInlineEnd--32 {
+  margin-inline-end: var(--base-size-32);
+}
+.Box-narrow-marginInlineEnd--36 {
+  margin-inline-end: var(--base-size-36);
+}
+.Box-narrow-marginInlineEnd--40 {
+  margin-inline-end: var(--base-size-40);
+}
+.Box-narrow-marginInlineEnd--44 {
+  margin-inline-end: var(--base-size-44);
+}
+.Box-narrow-marginInlineEnd--48 {
+  margin-inline-end: var(--base-size-48);
+}
+.Box-narrow-marginInlineEnd--64 {
+  margin-inline-end: var(--base-size-64);
+}
+.Box-narrow-marginInlineEnd--80 {
+  margin-inline-end: var(--base-size-80);
+}
+.Box-narrow-marginInlineEnd--96 {
+  margin-inline-end: var(--base-size-96);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-marginInlineEnd--condensed {
+    margin-inline-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-marginInlineEnd--normal {
+    margin-inline-end: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-marginInlineEnd--spacious {
+    margin-inline-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-marginInlineEnd--none {
+    margin-inline-end: 0;
+  }
+  .Box-regular-marginInlineEnd--4 {
+    margin-inline-end: var(--base-size-4);
+  }
+  .Box-regular-marginInlineEnd--8 {
+    margin-inline-end: var(--base-size-8);
+  }
+  .Box-regular-marginInlineEnd--12 {
+    margin-inline-end: var(--base-size-12);
+  }
+  .Box-regular-marginInlineEnd--16 {
+    margin-inline-end: var(--base-size-16);
+  }
+  .Box-regular-marginInlineEnd--20 {
+    margin-inline-end: var(--base-size-20);
+  }
+  .Box-regular-marginInlineEnd--24 {
+    margin-inline-end: var(--base-size-24);
+  }
+  .Box-regular-marginInlineEnd--28 {
+    margin-inline-end: var(--base-size-28);
+  }
+  .Box-regular-marginInlineEnd--32 {
+    margin-inline-end: var(--base-size-32);
+  }
+  .Box-regular-marginInlineEnd--36 {
+    margin-inline-end: var(--base-size-36);
+  }
+  .Box-regular-marginInlineEnd--40 {
+    margin-inline-end: var(--base-size-40);
+  }
+  .Box-regular-marginInlineEnd--44 {
+    margin-inline-end: var(--base-size-44);
+  }
+  .Box-regular-marginInlineEnd--48 {
+    margin-inline-end: var(--base-size-48);
+  }
+  .Box-regular-marginInlineEnd--64 {
+    margin-inline-end: var(--base-size-64);
+  }
+  .Box-regular-marginInlineEnd--80 {
+    margin-inline-end: var(--base-size-80);
+  }
+  .Box-regular-marginInlineEnd--96 {
+    margin-inline-end: var(--base-size-96);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-marginInlineEnd--condensed {
+    margin-inline-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-marginInlineEnd--normal {
+    margin-inline-end: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-marginInlineEnd--spacious {
+    margin-inline-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-marginInlineEnd--none {
+    margin-inline-end: 0;
+  }
+  .Box-wide-marginInlineEnd--4 {
+    margin-inline-end: var(--base-size-4);
+  }
+  .Box-wide-marginInlineEnd--8 {
+    margin-inline-end: var(--base-size-8);
+  }
+  .Box-wide-marginInlineEnd--12 {
+    margin-inline-end: var(--base-size-12);
+  }
+  .Box-wide-marginInlineEnd--16 {
+    margin-inline-end: var(--base-size-16);
+  }
+  .Box-wide-marginInlineEnd--20 {
+    margin-inline-end: var(--base-size-20);
+  }
+  .Box-wide-marginInlineEnd--24 {
+    margin-inline-end: var(--base-size-24);
+  }
+  .Box-wide-marginInlineEnd--28 {
+    margin-inline-end: var(--base-size-28);
+  }
+  .Box-wide-marginInlineEnd--32 {
+    margin-inline-end: var(--base-size-32);
+  }
+  .Box-wide-marginInlineEnd--36 {
+    margin-inline-end: var(--base-size-36);
+  }
+  .Box-wide-marginInlineEnd--40 {
+    margin-inline-end: var(--base-size-40);
+  }
+  .Box-wide-marginInlineEnd--44 {
+    margin-inline-end: var(--base-size-44);
+  }
+  .Box-wide-marginInlineEnd--48 {
+    margin-inline-end: var(--base-size-48);
+  }
+  .Box-wide-marginInlineEnd--64 {
+    margin-inline-end: var(--base-size-64);
+  }
+  .Box-wide-marginInlineEnd--80 {
+    margin-inline-end: var(--base-size-80);
+  }
+  .Box-wide-marginInlineEnd--96 {
+    margin-inline-end: var(--base-size-96);
+  }
+}
+/**
+ * 9. Margin bottom
+ */
+.Box-marginBlockEnd--condensed {
+  margin-block-end: var(--brand-box-spacing-condensed);
+}
+.Box-marginBlockEnd--normal {
+  margin-block-end: var(--brand-box-spacing-normal);
+}
+.Box-marginBlockEnd--spacious {
+  margin-block-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-marginBlockEnd--none {
+  margin-block-end: 0;
+}
+.Box-marginBlockEnd--4 {
+  margin-block-end: var(--base-size-4);
+}
+.Box-marginBlockEnd--8 {
+  margin-block-end: var(--base-size-8);
+}
+.Box-marginBlockEnd--12 {
+  margin-block-end: var(--base-size-12);
+}
+.Box-marginBlockEnd--16 {
+  margin-block-end: var(--base-size-16);
+}
+.Box-marginBlockEnd--20 {
+  margin-block-end: var(--base-size-20);
+}
+.Box-marginBlockEnd--24 {
+  margin-block-end: var(--base-size-24);
+}
+.Box-marginBlockEnd--28 {
+  margin-block-end: var(--base-size-28);
+}
+.Box-marginBlockEnd--32 {
+  margin-block-end: var(--base-size-32);
+}
+.Box-marginBlockEnd--36 {
+  margin-block-end: var(--base-size-36);
+}
+.Box-marginBlockEnd--40 {
+  margin-block-end: var(--base-size-40);
+}
+.Box-marginBlockEnd--44 {
+  margin-block-end: var(--base-size-44);
+}
+.Box-marginBlockEnd--48 {
+  margin-block-end: var(--base-size-48);
+}
+.Box-marginBlockEnd--64 {
+  margin-block-end: var(--base-size-64);
+}
+.Box-marginBlockEnd--80 {
+  margin-block-end: var(--base-size-80);
+}
+.Box-marginBlockEnd--96 {
+  margin-block-end: var(--base-size-96);
+}
+.Box-marginBlockEnd--112 {
+  margin-block-end: var(--base-size-112);
+}
+.Box-marginBlockEnd--128 {
+  margin-block-end: var(--base-size-128);
+}
+
+.Box-narrow-marginBlockEnd--condensed {
+  margin-block-end: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-marginBlockEnd--normal {
+  margin-block-end: var(--brand-box-spacing-normal);
+}
+.Box-narrow-marginBlockEnd--spacious {
+  margin-block-end: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-marginBlockEnd--none {
+  margin-block-end: 0;
+}
+.Box-narrow-marginBlockEnd--4 {
+  margin-block-end: var(--base-size-4);
+}
+.Box-narrow-marginBlockEnd--8 {
+  margin-block-end: var(--base-size-8);
+}
+.Box-narrow-marginBlockEnd--12 {
+  margin-block-end: var(--base-size-12);
+}
+.Box-narrow-marginBlockEnd--16 {
+  margin-block-end: var(--base-size-16);
+}
+.Box-narrow-marginBlockEnd--20 {
+  margin-block-end: var(--base-size-20);
+}
+.Box-narrow-marginBlockEnd--24 {
+  margin-block-end: var(--base-size-24);
+}
+.Box-narrow-marginBlockEnd--28 {
+  margin-block-end: var(--base-size-28);
+}
+.Box-narrow-marginBlockEnd--32 {
+  margin-block-end: var(--base-size-32);
+}
+.Box-narrow-marginBlockEnd--36 {
+  margin-block-end: var(--base-size-36);
+}
+.Box-narrow-marginBlockEnd--40 {
+  margin-block-end: var(--base-size-40);
+}
+.Box-narrow-marginBlockEnd--44 {
+  margin-block-end: var(--base-size-44);
+}
+.Box-narrow-marginBlockEnd--48 {
+  margin-block-end: var(--base-size-48);
+}
+.Box-narrow-marginBlockEnd--64 {
+  margin-block-end: var(--base-size-64);
+}
+.Box-narrow-marginBlockEnd--80 {
+  margin-block-end: var(--base-size-80);
+}
+.Box-narrow-marginBlockEnd--96 {
+  margin-block-end: var(--base-size-96);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-marginBlockEnd--condensed {
+    margin-block-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-marginBlockEnd--normal {
+    margin-block-end: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-marginBlockEnd--spacious {
+    margin-block-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-marginBlockEnd--none {
+    margin-block-end: 0;
+  }
+  .Box-regular-marginBlockEnd--4 {
+    margin-block-end: var(--base-size-4);
+  }
+  .Box-regular-marginBlockEnd--8 {
+    margin-block-end: var(--base-size-8);
+  }
+  .Box-regular-marginBlockEnd--12 {
+    margin-block-end: var(--base-size-12);
+  }
+  .Box-regular-marginBlockEnd--16 {
+    margin-block-end: var(--base-size-16);
+  }
+  .Box-regular-marginBlockEnd--20 {
+    margin-block-end: var(--base-size-20);
+  }
+  .Box-regular-marginBlockEnd--24 {
+    margin-block-end: var(--base-size-24);
+  }
+  .Box-regular-marginBlockEnd--28 {
+    margin-block-end: var(--base-size-28);
+  }
+  .Box-regular-marginBlockEnd--32 {
+    margin-block-end: var(--base-size-32);
+  }
+  .Box-regular-marginBlockEnd--36 {
+    margin-block-end: var(--base-size-36);
+  }
+  .Box-regular-marginBlockEnd--40 {
+    margin-block-end: var(--base-size-40);
+  }
+  .Box-regular-marginBlockEnd--44 {
+    margin-block-end: var(--base-size-44);
+  }
+  .Box-regular-marginBlockEnd--48 {
+    margin-block-end: var(--base-size-48);
+  }
+  .Box-regular-marginBlockEnd--64 {
+    margin-block-end: var(--base-size-64);
+  }
+  .Box-regular-marginBlockEnd--80 {
+    margin-block-end: var(--base-size-80);
+  }
+  .Box-regular-marginBlockEnd--96 {
+    margin-block-end: var(--base-size-96);
+  }
+  .Box-regular-marginBlockEnd--112 {
+    margin-block-end: var(--base-size-112);
+  }
+  .Box-regular-marginBlockEnd--128 {
+    margin-block-end: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-marginBlockEnd--condensed {
+    margin-block-end: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-marginBlockEnd--normal {
+    margin-block-end: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-marginBlockEnd--spacious {
+    margin-block-end: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-marginBlockEnd--none {
+    margin-block-end: 0;
+  }
+  .Box-wide-marginBlockEnd--4 {
+    margin-block-end: var(--base-size-4);
+  }
+  .Box-wide-marginBlockEnd--8 {
+    margin-block-end: var(--base-size-8);
+  }
+  .Box-wide-marginBlockEnd--12 {
+    margin-block-end: var(--base-size-12);
+  }
+  .Box-wide-marginBlockEnd--16 {
+    margin-block-end: var(--base-size-16);
+  }
+  .Box-wide-marginBlockEnd--20 {
+    margin-block-end: var(--base-size-20);
+  }
+  .Box-wide-marginBlockEnd--24 {
+    margin-block-end: var(--base-size-24);
+  }
+  .Box-wide-marginBlockEnd--28 {
+    margin-block-end: var(--base-size-28);
+  }
+  .Box-wide-marginBlockEnd--32 {
+    margin-block-end: var(--base-size-32);
+  }
+  .Box-wide-marginBlockEnd--36 {
+    margin-block-end: var(--base-size-36);
+  }
+  .Box-wide-marginBlockEnd--40 {
+    margin-block-end: var(--base-size-40);
+  }
+  .Box-wide-marginBlockEnd--44 {
+    margin-block-end: var(--base-size-44);
+  }
+  .Box-wide-marginBlockEnd--48 {
+    margin-block-end: var(--base-size-48);
+  }
+  .Box-wide-marginBlockEnd--64 {
+    margin-block-end: var(--base-size-64);
+  }
+  .Box-wide-marginBlockEnd--80 {
+    margin-block-end: var(--base-size-80);
+  }
+  .Box-wide-marginBlockEnd--96 {
+    margin-block-end: var(--base-size-96);
+  }
+  .Box-wide-marginBlockEnd--112 {
+    margin-block-end: var(--base-size-112);
+  }
+  .Box-wide-marginBlockEnd--128 {
+    margin-block-end: var(--base-size-128);
+  }
+}
+
+/**
+ * 10. Margin Left
+ */
+.Box-marginInlineStart--condensed {
+  margin-inline-start: var(--brand-box-spacing-condensed);
+}
+.Box-marginInlineStart--normal {
+  margin-inline-start: var(--brand-box-spacing-normal);
+}
+.Box-marginInlineStart--spacious {
+  margin-inline-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-marginInlineStart--none {
+  margin-inline-start: 0;
+}
+.Box-marginInlineStart--4 {
+  margin-inline-start: var(--base-size-4);
+}
+.Box-marginInlineStart--8 {
+  margin-inline-start: var(--base-size-8);
+}
+.Box-marginInlineStart--12 {
+  margin-inline-start: var(--base-size-12);
+}
+.Box-marginInlineStart--16 {
+  margin-inline-start: var(--base-size-16);
+}
+.Box-marginInlineStart--20 {
+  margin-inline-start: var(--base-size-20);
+}
+.Box-marginInlineStart--24 {
+  margin-inline-start: var(--base-size-24);
+}
+.Box-marginInlineStart--28 {
+  margin-inline-start: var(--base-size-28);
+}
+.Box-marginInlineStart--32 {
+  margin-inline-start: var(--base-size-32);
+}
+.Box-marginInlineStart--36 {
+  margin-inline-start: var(--base-size-36);
+}
+.Box-marginInlineStart--40 {
+  margin-inline-start: var(--base-size-40);
+}
+.Box-marginInlineStart--44 {
+  margin-inline-start: var(--base-size-44);
+}
+.Box-marginInlineStart--48 {
+  margin-inline-start: var(--base-size-48);
+}
+.Box-marginInlineStart--64 {
+  margin-inline-start: var(--base-size-64);
+}
+.Box-marginInlineStart--80 {
+  margin-inline-start: var(--base-size-80);
+}
+.Box-marginInlineStart--96 {
+  margin-inline-start: var(--base-size-96);
+}
+.Box-marginInlineStart--112 {
+  margin-inline-start: var(--base-size-112);
+}
+.Box-marginInlineStart--128 {
+  margin-inline-start: var(--base-size-128);
+}
+
+.Box-narrow-marginInlineStart--condensed {
+  margin-inline-start: var(--brand-box-spacing-condensed);
+}
+.Box-narrow-marginInlineStart--normal {
+  margin-inline-start: var(--brand-box-spacing-normal);
+}
+.Box-narrow-marginInlineStart--spacious {
+  margin-inline-start: var(--brand-box-spacing-spacious);
+}
+
+.Box-narrow-marginInlineStart--none {
+  margin-inline-start: 0;
+}
+.Box-narrow-marginInlineStart--4 {
+  margin-inline-start: var(--base-size-4);
+}
+.Box-narrow-marginInlineStart--8 {
+  margin-inline-start: var(--base-size-8);
+}
+.Box-narrow-marginInlineStart--12 {
+  margin-inline-start: var(--base-size-12);
+}
+.Box-narrow-marginInlineStart--16 {
+  margin-inline-start: var(--base-size-16);
+}
+.Box-narrow-marginInlineStart--20 {
+  margin-inline-start: var(--base-size-20);
+}
+.Box-narrow-marginInlineStart--24 {
+  margin-inline-start: var(--base-size-24);
+}
+.Box-narrow-marginInlineStart--28 {
+  margin-inline-start: var(--base-size-28);
+}
+.Box-narrow-marginInlineStart--32 {
+  margin-inline-start: var(--base-size-32);
+}
+.Box-narrow-marginInlineStart--36 {
+  margin-inline-start: var(--base-size-36);
+}
+.Box-narrow-marginInlineStart--40 {
+  margin-inline-start: var(--base-size-40);
+}
+.Box-narrow-marginInlineStart--44 {
+  margin-inline-start: var(--base-size-44);
+}
+.Box-narrow-marginInlineStart--48 {
+  margin-inline-start: var(--base-size-48);
+}
+.Box-narrow-marginInlineStart--64 {
+  margin-inline-start: var(--base-size-64);
+}
+.Box-narrow-marginInlineStart--80 {
+  margin-inline-start: var(--base-size-80);
+}
+.Box-narrow-marginInlineStart--96 {
+  margin-inline-start: var(--base-size-96);
+}
+.Box-narrow-marginInlineStart--112 {
+  margin-inline-start: var(--base-size-112);
+}
+.Box-narrow-marginInlineStart--128 {
+  margin-inline-start: var(--base-size-128);
+}
+
+@media screen and (min-width: 48rem) {
+  .Box-regular-marginInlineStart--condensed {
+    margin-inline-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-regular-marginInlineStart--normal {
+    margin-inline-start: var(--brand-box-spacing-normal);
+  }
+  .Box-regular-marginInlineStart--spacious {
+    margin-inline-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-regular-marginInlineStart--none {
+    margin-inline-start: 0;
+  }
+  .Box-regular-marginInlineStart--4 {
+    margin-inline-start: var(--base-size-4);
+  }
+  .Box-regular-marginInlineStart--8 {
+    margin-inline-start: var(--base-size-8);
+  }
+  .Box-regular-marginInlineStart--12 {
+    margin-inline-start: var(--base-size-12);
+  }
+  .Box-regular-marginInlineStart--16 {
+    margin-inline-start: var(--base-size-16);
+  }
+  .Box-regular-marginInlineStart--20 {
+    margin-inline-start: var(--base-size-20);
+  }
+  .Box-regular-marginInlineStart--24 {
+    margin-inline-start: var(--base-size-24);
+  }
+  .Box-regular-marginInlineStart--28 {
+    margin-inline-start: var(--base-size-28);
+  }
+  .Box-regular-marginInlineStart--32 {
+    margin-inline-start: var(--base-size-32);
+  }
+  .Box-regular-marginInlineStart--36 {
+    margin-inline-start: var(--base-size-36);
+  }
+  .Box-regular-marginInlineStart--40 {
+    margin-inline-start: var(--base-size-40);
+  }
+  .Box-regular-marginInlineStart--44 {
+    margin-inline-start: var(--base-size-44);
+  }
+  .Box-regular-marginInlineStart--48 {
+    margin-inline-start: var(--base-size-48);
+  }
+  .Box-regular-marginInlineStart--64 {
+    margin-inline-start: var(--base-size-64);
+  }
+  .Box-regular-marginInlineStart--80 {
+    margin-inline-start: var(--base-size-80);
+  }
+  .Box-regular-marginInlineStart--96 {
+    margin-inline-start: var(--base-size-96);
+  }
+  .Box-regular-marginInlineStart--112 {
+    margin-inline-start: var(--base-size-112);
+  }
+  .Box-regular-marginInlineStart--128 {
+    margin-inline-start: var(--base-size-128);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Box-wide-marginInlineStart--condensed {
+    margin-inline-start: var(--brand-box-spacing-condensed);
+  }
+  .Box-wide-marginInlineStart--normal {
+    margin-inline-start: var(--brand-box-spacing-normal);
+  }
+  .Box-wide-marginInlineStart--spacious {
+    margin-inline-start: var(--brand-box-spacing-spacious);
+  }
+
+  .Box-wide-marginInlineStart--none {
+    margin-inline-start: 0;
+  }
+  .Box-wide-marginInlineStart--4 {
+    margin-inline-start: var(--base-size-4);
+  }
+  .Box-wide-marginInlineStart--8 {
+    margin-inline-start: var(--base-size-8);
+  }
+  .Box-wide-marginInlineStart--12 {
+    margin-inline-start: var(--base-size-12);
+  }
+  .Box-wide-marginInlineStart--16 {
+    margin-inline-start: var(--base-size-16);
+  }
+  .Box-wide-marginInlineStart--20 {
+    margin-inline-start: var(--base-size-20);
+  }
+  .Box-wide-marginInlineStart--24 {
+    margin-inline-start: var(--base-size-24);
+  }
+  .Box-wide-marginInlineStart--28 {
+    margin-inline-start: var(--base-size-28);
+  }
+  .Box-wide-marginInlineStart--32 {
+    margin-inline-start: var(--base-size-32);
+  }
+  .Box-wide-marginInlineStart--36 {
+    margin-inline-start: var(--base-size-36);
+  }
+  .Box-wide-marginInlineStart--40 {
+    margin-inline-start: var(--base-size-40);
+  }
+  .Box-wide-marginInlineStart--44 {
+    margin-inline-start: var(--base-size-44);
+  }
+  .Box-wide-marginInlineStart--48 {
+    margin-inline-start: var(--base-size-48);
+  }
+  .Box-wide-marginInlineStart--64 {
+    margin-inline-start: var(--base-size-64);
+  }
+  .Box-wide-marginInlineStart--80 {
+    margin-inline-start: var(--base-size-80);
+  }
+  .Box-wide-marginInlineStart--96 {
+    margin-inline-start: var(--base-size-96);
+  }
+  .Box-wide-marginInlineStart--112 {
+    margin-inline-start: var(--base-size-112);
+  }
+  .Box-wide-marginInlineStart--128 {
+    margin-inline-start: var(--base-size-128);
+  }
+}
+
+/**
+ * 11. Background Color
+ */
+.Box-backgroundColor--default {
+  background-color: var(--brand-color-canvas-default);
+}
+
+.Box-backgroundColor--inset {
+  background-color: var(--brand-color-canvas-inset);
+}
+
+.Box-backgroundColor--subtle {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.Box-backgroundColor--overlay {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+/*
+* 12. Border Radius
+*/
+.Box-borderRadius--small {
+  border-radius: var(--brand-borderRadius-small);
+}
+
+.Box-borderRadius--medium {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.Box-borderRadius--large {
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.Box-borderRadius--xlarge {
+  border-radius: var(--brand-borderRadius-xlarge);
+}
+
+.Box-borderRadius--full {
+  border-radius: var(--brand-borderRadius-full);
+}
+
+/*
+* 13. Border Width
+*/
+.Box-borderWidth--thin {
+  border-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderWidth--thick {
+  border-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderWidth--thicker {
+  border-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderBlockStartWidth--thin {
+  border-width: 0;
+  border-block-start-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderBlockStartWidth--thick {
+  border-width: 0;
+  border-block-start-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderBlockStartWidth--thicker {
+  border-width: 0;
+  border-block-start-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderInlineEndWidth--thin {
+  border-width: 0;
+  border-right-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderInlineEndWidth--thick {
+  border-width: 0;
+  border-right-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderInlineEndWidth--thicker {
+  border-width: 0;
+  border-right-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderBlockEndWidth--thin {
+  border-width: 0;
+  border-bottom-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderBlockEndWidth--thick {
+  border-width: 0;
+  border-bottom-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderBlockEndWidth--thicker {
+  border-width: 0;
+  border-bottom-width: var(--brand-borderWidth-thicker);
+}
+
+.Box-borderInlineStartWidth--thin {
+  border-width: 0;
+  border-left-width: var(--brand-borderWidth-thin);
+}
+
+.Box-borderInlineStartWidth--thick {
+  border-width: 0;
+  border-left-width: var(--brand-borderWidth-thick);
+}
+
+.Box-borderInlineStartWidth--thicker {
+  border-width: 0;
+  border-left-width: var(--brand-borderWidth-thicker);
+}
+
+/*
+* 14. Border Color
+*/
+.Box-borderColor--default {
+  border-color: var(--brand-color-border-default);
+}
+
+.Box-borderColor--muted {
+  border-color: var(--brand-color-border-muted);
+}
+
+.Box-borderColor--subtle {
+  border-color: var(--brand-color-border-subtle);
+}
+
+/*
+* 15. Border Style
+*/
+.Box-borderStyle--solid {
+  border-style: solid;
+}
+
+.Box-borderStyle--none {
+  border-style: none;
+}