npm - @primer/react-brand - Versions diffs - 0.68.1-rc.e248cf2a → 0.69.0-rc.50f5ffef - Mend

@primer/react-brand 0.68.1-rc.e248cf2a → 0.69.0-rc.50f5ffef

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (441) hide show

package/esm/Box/Box.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Box.module.js","names":[],"sources":["../../src/Box/Box.module.css"],"sourcesContent":["/* ---------------------------------------------------------- /\n/ Box component table of contents /\n/ Please ensure that this is kept up to date as the /\n/ component evolves. /\n/ ---------------------------------------------------------- /\n/ Table of contents: /\n/ 1. Padding /\n/ 2. Padding Top /\n/ 3. Padding Right /\n/ 4. Padding Bottom /\n/ 5. Padding Left /\n/ 6. Margin /\n/ 7. Margin Top /\n/ 8. Margin Right /\n/ 9. Margin Bottom /\n/ 10. Margin Left /\n/ 11. Background Colors /\n/ 12. Border Radius /\n/ 13. Border Width /\n/ 14. Border Color /\n/ 15. Border Style /\n/ ---------------------------------------------------------- /\n\n/\n 1. Padding\n /\n.Box-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Box-padding--normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Box-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n}\n\n.Box-padding--none {\n padding: 0;\n}\n\n.Box-padding--4 {\n padding: var(--base-size-4);\n}\n.Box-padding--8 {\n padding: var(--base-size-8);\n}\n.Box-padding--12 {\n padding: var(--base-size-12);\n}\n.Box-padding--16 {\n padding: var(--base-size-16);\n}\n.Box-padding--20 {\n padding: var(--base-size-20);\n}\n.Box-padding--24 {\n padding: var(--base-size-24);\n}\n.Box-padding--28 {\n padding: var(--base-size-28);\n}\n.Box-padding--32 {\n padding: var(--base-size-32);\n}\n.Box-padding--36 {\n padding: var(--base-size-36);\n}\n.Box-padding--40 {\n padding: var(--base-size-40);\n}\n.Box-padding--44 {\n padding: var(--base-size-44);\n}\n.Box-padding--48 {\n padding: var(--base-size-48);\n}\n.Box-padding--64 {\n padding: var(--base-size-64);\n}\n.Box-padding--80 {\n padding: var(--base-size-80);\n}\n.Box-padding--96 {\n padding: var(--base-size-96);\n}\n.Box-padding--112 {\n padding: var(--base-size-112);\n}\n.Box-padding--128 {\n padding: var(--base-size-128);\n}\n.Box-narrow-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-padding--normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Box-narrow-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-padding--none {\n padding: 0;\n}\n\n.Box-narrow-padding--4 {\n padding: var(--base-size-4);\n}\n.Box-narrow-padding--8 {\n padding: var(--base-size-8);\n}\n.Box-narrow-padding--12 {\n padding: var(--base-size-12);\n}\n.Box-narrow-padding--16 {\n padding: var(--base-size-16);\n}\n.Box-narrow-padding--20 {\n padding: var(--base-size-20);\n}\n.Box-narrow-padding--24 {\n padding: var(--base-size-24);\n}\n.Box-narrow-padding--28 {\n padding: var(--base-size-28);\n}\n.Box-narrow-padding--32 {\n padding: var(--base-size-32);\n}\n.Box-narrow-padding--36 {\n padding: var(--base-size-36);\n}\n.Box-narrow-padding--40 {\n padding: var(--base-size-40);\n}\n.Box-narrow-padding--44 {\n padding: var(--base-size-44);\n}\n.Box-narrow-padding--48 {\n padding: var(--base-size-48);\n}\n.Box-narrow-padding--64 {\n padding: var(--base-size-64);\n}\n.Box-narrow-padding--80 {\n padding: var(--base-size-80);\n}\n.Box-narrow-padding--96 {\n padding: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n }\n .Box-regular-padding--normal {\n padding: var(--brand-box-spacing-normal);\n }\n .Box-regular-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-padding--none {\n padding: 0;\n }\n .Box-regular-padding--4 {\n padding: var(--base-size-4);\n }\n .Box-regular-padding--8 {\n padding: var(--base-size-8);\n }\n .Box-regular-padding--12 {\n padding: var(--base-size-12);\n }\n .Box-regular-padding--16 {\n padding: var(--base-size-16);\n }\n .Box-regular-padding--20 {\n padding: var(--base-size-20);\n }\n .Box-regular-padding--24 {\n padding: var(--base-size-24);\n }\n .Box-regular-padding--28 {\n padding: var(--base-size-28);\n }\n .Box-regular-padding--32 {\n padding: var(--base-size-32);\n }\n .Box-regular-padding--36 {\n padding: var(--base-size-36);\n }\n .Box-regular-padding--40 {\n padding: var(--base-size-40);\n }\n .Box-regular-padding--44 {\n padding: var(--base-size-44);\n }\n .Box-regular-padding--48 {\n padding: var(--base-size-48);\n }\n .Box-regular-padding--64 {\n padding: var(--base-size-64);\n }\n .Box-regular-padding--80 {\n padding: var(--base-size-80);\n }\n .Box-regular-padding--96 {\n padding: var(--base-size-96);\n }\n .Box-regular-padding--112 {\n padding: var(--base-size-112);\n }\n .Box-regular-padding--128 {\n padding: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n }\n .Box-wide-padding--normal {\n padding: var(--brand-box-spacing-normal);\n }\n .Box-wide-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-padding--none {\n padding: 0;\n }\n .Box-wide-padding--4 {\n padding: var(--base-size-4);\n }\n .Box-wide-padding--8 {\n padding: var(--base-size-8);\n }\n .Box-wide-padding--12 {\n padding: var(--base-size-12);\n }\n .Box-wide-padding--16 {\n padding: var(--base-size-16);\n }\n .Box-wide-padding--20 {\n padding: var(--base-size-20);\n }\n .Box-wide-padding--24 {\n padding: var(--base-size-24);\n }\n .Box-wide-padding--28 {\n padding: var(--base-size-28);\n }\n .Box-wide-padding--32 {\n padding: var(--base-size-32);\n }\n .Box-wide-padding--36 {\n padding: var(--base-size-36);\n }\n .Box-wide-padding--40 {\n padding: var(--base-size-40);\n }\n .Box-wide-padding--44 {\n padding: var(--base-size-44);\n }\n .Box-wide-padding--48 {\n padding: var(--base-size-48);\n }\n .Box-wide-padding--64 {\n padding: var(--base-size-64);\n }\n .Box-wide-padding--80 {\n padding: var(--base-size-80);\n }\n .Box-wide-padding--96 {\n padding: var(--base-size-96);\n }\n .Box-wide-padding--112 {\n padding: var(--base-size-112);\n }\n .Box-wide-padding--128 {\n padding: var(--base-size-128);\n }\n}\n\n/\n 2. Padding Top\n /\n.Box-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n}\n.Box-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingBlockStart--none {\n padding-block-start: 0;\n}\n.Box-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n}\n.Box-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n}\n.Box-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n}\n.Box-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n}\n.Box-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n}\n.Box-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n}\n.Box-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n}\n.Box-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n}\n.Box-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n}\n.Box-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n}\n.Box-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n}\n.Box-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n}\n.Box-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n}\n.Box-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n}\n.Box-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n}\n.Box-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n}\n.Box-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n}\n\n.Box-narrow-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingBlockStart--none {\n padding-block-start: 0;\n}\n\n.Box-narrow-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n}\n.Box-narrow-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n}\n.Box-narrow-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n}\n.Box-narrow-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n}\n.Box-narrow-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n}\n.Box-narrow-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n}\n.Box-narrow-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n}\n.Box-narrow-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n}\n.Box-narrow-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n}\n.Box-narrow-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n}\n.Box-narrow-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n}\n.Box-narrow-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n}\n.Box-narrow-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n}\n.Box-narrow-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n}\n.Box-narrow-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n}\n.Box-narrow-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n}\n.Box-narrow-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingBlockStart--none {\n padding-block-start: 0;\n }\n .Box-regular-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n }\n .Box-regular-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n }\n .Box-regular-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n }\n .Box-regular-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n }\n .Box-regular-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n }\n .Box-regular-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n }\n .Box-regular-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n }\n .Box-regular-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n }\n .Box-regular-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n }\n .Box-regular-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n }\n .Box-regular-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n }\n .Box-regular-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n }\n .Box-regular-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n }\n .Box-regular-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n }\n .Box-regular-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n }\n .Box-regular-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n }\n .Box-regular-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingBlockStart--none {\n padding-block-start: 0;\n }\n .Box-wide-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n }\n .Box-wide-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n }\n .Box-wide-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n }\n .Box-wide-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n }\n .Box-wide-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n }\n .Box-wide-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n }\n .Box-wide-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n }\n .Box-wide-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n }\n .Box-wide-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n }\n .Box-wide-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n }\n .Box-wide-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n }\n .Box-wide-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n }\n .Box-wide-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n }\n .Box-wide-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n }\n .Box-wide-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n }\n .Box-wide-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n }\n .Box-wide-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n }\n}\n\n/\n 3. Padding Right\n /\n.Box-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingInlineEnd--none {\n padding-inline-end: 0;\n}\n.Box-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n}\n.Box-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n}\n.Box-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n}\n.Box-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n}\n.Box-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n}\n.Box-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n}\n.Box-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n}\n.Box-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n}\n.Box-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n}\n.Box-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n}\n.Box-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n}\n.Box-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n}\n.Box-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n}\n.Box-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n}\n.Box-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n}\n.Box-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n}\n.Box-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n}\n\n.Box-narrow-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingInlineEnd--none {\n padding-inline-end: 0;\n}\n.Box-narrow-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n}\n.Box-narrow-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n}\n.Box-narrow-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n}\n.Box-narrow-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n}\n.Box-narrow-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n}\n.Box-narrow-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n}\n.Box-narrow-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n}\n.Box-narrow-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n}\n.Box-narrow-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n}\n.Box-narrow-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n}\n.Box-narrow-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n}\n.Box-narrow-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n}\n.Box-narrow-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n}\n.Box-narrow-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n}\n.Box-narrow-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingInlineEnd--none {\n padding-inline-end: 0;\n }\n .Box-regular-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n }\n .Box-regular-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n }\n .Box-regular-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n }\n .Box-regular-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n }\n .Box-regular-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n }\n .Box-regular-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n }\n .Box-regular-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n }\n .Box-regular-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n }\n .Box-regular-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n }\n .Box-regular-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n }\n .Box-regular-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n }\n .Box-regular-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n }\n .Box-regular-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n }\n .Box-regular-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n }\n .Box-regular-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n }\n .Box-regular-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n }\n .Box-regular-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingInlineEnd--none {\n padding-inline-end: 0;\n }\n .Box-wide-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n }\n .Box-wide-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n }\n .Box-wide-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n }\n .Box-wide-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n }\n .Box-wide-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n }\n .Box-wide-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n }\n .Box-wide-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n }\n .Box-wide-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n }\n .Box-wide-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n }\n .Box-wide-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n }\n .Box-wide-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n }\n .Box-wide-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n }\n .Box-wide-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n }\n .Box-wide-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n }\n .Box-wide-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n }\n .Box-wide-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n }\n .Box-wide-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n }\n}\n/\n 4. Padding bottom\n /\n.Box-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n}\n.Box-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingBlockEnd--none {\n padding-block-end: 0;\n}\n.Box-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n}\n.Box-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n}\n.Box-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n}\n.Box-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n}\n.Box-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n}\n.Box-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n}\n.Box-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n}\n.Box-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n}\n.Box-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n}\n.Box-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n}\n.Box-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n}\n.Box-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n}\n.Box-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n}\n.Box-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n}\n.Box-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n}\n.Box-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n}\n.Box-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n}\n\n.Box-narrow-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingBlockEnd--none {\n padding-block-end: 0;\n}\n.Box-narrow-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n}\n.Box-narrow-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n}\n.Box-narrow-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n}\n.Box-narrow-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n}\n.Box-narrow-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n}\n.Box-narrow-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n}\n.Box-narrow-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n}\n.Box-narrow-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n}\n.Box-narrow-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n}\n.Box-narrow-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n}\n.Box-narrow-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n}\n.Box-narrow-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n}\n.Box-narrow-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n}\n.Box-narrow-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n}\n.Box-narrow-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n}\n.Box-narrow-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n}\n.Box-narrow-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingBlockEnd--none {\n padding-block-end: 0;\n }\n .Box-regular-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n }\n .Box-regular-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n }\n .Box-regular-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n }\n .Box-regular-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n }\n .Box-regular-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n }\n .Box-regular-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n }\n .Box-regular-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n }\n .Box-regular-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n }\n .Box-regular-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n }\n .Box-regular-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n }\n .Box-regular-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n }\n .Box-regular-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n }\n .Box-regular-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n }\n .Box-regular-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n }\n .Box-regular-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n }\n .Box-regular-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n }\n .Box-regular-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingBlockEnd--none {\n padding-block-end: 0;\n }\n .Box-wide-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n }\n .Box-wide-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n }\n .Box-wide-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n }\n .Box-wide-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n }\n .Box-wide-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n }\n .Box-wide-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n }\n .Box-wide-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n }\n .Box-wide-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n }\n .Box-wide-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n }\n .Box-wide-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n }\n .Box-wide-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n }\n .Box-wide-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n }\n .Box-wide-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n }\n .Box-wide-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n }\n .Box-wide-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n }\n .Box-wide-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n }\n .Box-wide-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n }\n}\n\n/\n 5. Padding Left\n /\n.Box-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingInlineStart--none {\n padding-inline-start: 0;\n}\n.Box-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n}\n.Box-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n}\n.Box-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n}\n.Box-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n}\n.Box-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n}\n.Box-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n}\n.Box-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n}\n.Box-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n}\n.Box-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n}\n.Box-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n}\n.Box-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n}\n.Box-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n}\n.Box-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n}\n.Box-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n}\n.Box-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n}\n.Box-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n}\n.Box-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n}\n\n.Box-narrow-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingInlineStart--none {\n padding-inline-start: 0;\n}\n.Box-narrow-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n}\n.Box-narrow-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n}\n.Box-narrow-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n}\n.Box-narrow-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n}\n.Box-narrow-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n}\n.Box-narrow-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n}\n.Box-narrow-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n}\n.Box-narrow-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n}\n.Box-narrow-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n}\n.Box-narrow-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n}\n.Box-narrow-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n}\n.Box-narrow-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n}\n.Box-narrow-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n}\n.Box-narrow-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n}\n.Box-narrow-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n}\n.Box-narrow-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n}\n.Box-narrow-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingInlineStart--none {\n padding-inline-start: 0;\n }\n .Box-regular-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n }\n .Box-regular-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n }\n .Box-regular-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n }\n .Box-regular-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n }\n .Box-regular-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n }\n .Box-regular-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n }\n .Box-regular-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n }\n .Box-regular-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n }\n .Box-regular-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n }\n .Box-regular-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n }\n .Box-regular-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n }\n .Box-regular-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n }\n .Box-regular-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n }\n .Box-regular-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n }\n .Box-regular-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n }\n .Box-regular-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n }\n .Box-regular-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingInlineStart--none {\n padding-inline-start: 0;\n }\n .Box-wide-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n }\n .Box-wide-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n }\n .Box-wide-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n }\n .Box-wide-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n }\n .Box-wide-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n }\n .Box-wide-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n }\n .Box-wide-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n }\n .Box-wide-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n }\n .Box-wide-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n }\n .Box-wide-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n }\n .Box-wide-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n }\n .Box-wide-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n }\n .Box-wide-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n }\n .Box-wide-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n }\n .Box-wide-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n }\n .Box-wide-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n }\n .Box-wide-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n }\n}\n\n/\n 6. Margin\n /\n.Box-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n}\n.Box-margin--normal {\n margin: var(--brand-box-spacing-normal);\n}\n.Box-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n}\n\n.Box-margin--none {\n margin: 0;\n}\n.Box-margin--4 {\n margin: var(--base-size-4);\n}\n.Box-margin--8 {\n margin: var(--base-size-8);\n}\n.Box-margin--12 {\n margin: var(--base-size-12);\n}\n.Box-margin--16 {\n margin: var(--base-size-16);\n}\n.Box-margin--20 {\n margin: var(--base-size-20);\n}\n.Box-margin--24 {\n margin: var(--base-size-24);\n}\n.Box-margin--28 {\n margin: var(--base-size-28);\n}\n.Box-margin--32 {\n margin: var(--base-size-32);\n}\n.Box-margin--36 {\n margin: var(--base-size-36);\n}\n.Box-margin--40 {\n margin: var(--base-size-40);\n}\n.Box-margin--44 {\n margin: var(--base-size-44);\n}\n.Box-margin--48 {\n margin: var(--base-size-48);\n}\n.Box-margin--64 {\n margin: var(--base-size-64);\n}\n.Box-margin--80 {\n margin: var(--base-size-80);\n}\n.Box-margin--96 {\n margin: var(--base-size-96);\n}\n.Box-margin--112 {\n margin: var(--base-size-112);\n}\n.Box-margin--128 {\n margin: var(--base-size-128);\n}\n.Box-narrow-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-margin--normal {\n margin: var(--brand-box-spacing-normal);\n}\n.Box-narrow-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-margin--none {\n margin: 0;\n}\n.Box-narrow-margin--4 {\n margin: var(--base-size-4);\n}\n.Box-narrow-margin--8 {\n margin: var(--base-size-8);\n}\n.Box-narrow-margin--12 {\n margin: var(--base-size-12);\n}\n.Box-narrow-margin--16 {\n margin: var(--base-size-16);\n}\n.Box-narrow-margin--20 {\n margin: var(--base-size-20);\n}\n.Box-narrow-margin--24 {\n margin: var(--base-size-24);\n}\n.Box-narrow-margin--28 {\n margin: var(--base-size-28);\n}\n.Box-narrow-margin--32 {\n margin: var(--base-size-32);\n}\n.Box-narrow-margin--36 {\n margin: var(--base-size-36);\n}\n.Box-narrow-margin--40 {\n margin: var(--base-size-40);\n}\n.Box-narrow-margin--44 {\n margin: var(--base-size-44);\n}\n.Box-narrow-margin--48 {\n margin: var(--base-size-48);\n}\n.Box-narrow-margin--64 {\n margin: var(--base-size-64);\n}\n.Box-narrow-margin--80 {\n margin: var(--base-size-80);\n}\n.Box-narrow-margin--96 {\n margin: var(--base-size-96);\n}\n.Box-narrow-margin--112 {\n margin: var(--base-size-112);\n}\n.Box-narrow-margin--128 {\n margin: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n }\n .Box-regular-margin--normal {\n margin: var(--brand-box-spacing-normal);\n }\n .Box-regular-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-margin--none {\n margin: 0;\n }\n .Box-regular-margin--4 {\n margin: var(--base-size-4);\n }\n .Box-regular-margin--8 {\n margin: var(--base-size-8);\n }\n .Box-regular-margin--12 {\n margin: var(--base-size-12);\n }\n .Box-regular-margin--16 {\n margin: var(--base-size-16);\n }\n .Box-regular-margin--20 {\n margin: var(--base-size-20);\n }\n .Box-regular-margin--24 {\n margin: var(--base-size-24);\n }\n .Box-regular-margin--28 {\n margin: var(--base-size-28);\n }\n .Box-regular-margin--32 {\n margin: var(--base-size-32);\n }\n .Box-regular-margin--36 {\n margin: var(--base-size-36);\n }\n .Box-regular-margin--40 {\n margin: var(--base-size-40);\n }\n .Box-regular-margin--44 {\n margin: var(--base-size-44);\n }\n .Box-regular-margin--48 {\n margin: var(--base-size-48);\n }\n .Box-regular-margin--64 {\n margin: var(--base-size-64);\n }\n .Box-regular-margin--80 {\n margin: var(--base-size-80);\n }\n .Box-regular-margin--96 {\n margin: var(--base-size-96);\n }\n .Box-regular-margin--112 {\n margin: var(--base-size-112);\n }\n .Box-regular-margin--128 {\n margin: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n }\n .Box-wide-margin--normal {\n margin: var(--brand-box-spacing-normal);\n }\n .Box-wide-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-margin--none {\n margin: 0;\n }\n .Box-wide-margin--4 {\n margin: var(--base-size-4);\n }\n .Box-wide-margin--8 {\n margin: var(--base-size-8);\n }\n .Box-wide-margin--12 {\n margin: var(--base-size-12);\n }\n .Box-wide-margin--16 {\n margin: var(--base-size-16);\n }\n .Box-wide-margin--20 {\n margin: var(--base-size-20);\n }\n .Box-wide-margin--24 {\n margin: var(--base-size-24);\n }\n .Box-wide-margin--28 {\n margin: var(--base-size-28);\n }\n .Box-wide-margin--32 {\n margin: var(--base-size-32);\n }\n .Box-wide-margin--36 {\n margin: var(--base-size-36);\n }\n .Box-wide-margin--40 {\n margin: var(--base-size-40);\n }\n .Box-wide-margin--44 {\n margin: var(--base-size-44);\n }\n .Box-wide-margin--48 {\n margin: var(--base-size-48);\n }\n .Box-wide-margin--64 {\n margin: var(--base-size-64);\n }\n .Box-wide-margin--80 {\n margin: var(--base-size-80);\n }\n .Box-wide-margin--112 {\n margin: var(--base-size-112);\n }\n .Box-wide-margin--128 {\n margin: var(--base-size-128);\n }\n}\n\n/\n 7. Margin Top\n /\n.Box-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n}\n.Box-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginBlockStart--none {\n margin-block-start: 0;\n}\n.Box-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n}\n.Box-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n}\n.Box-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n}\n.Box-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n}\n.Box-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n}\n.Box-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n}\n.Box-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n}\n.Box-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n}\n.Box-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n}\n.Box-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n}\n.Box-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n}\n.Box-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n}\n.Box-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n}\n.Box-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n}\n.Box-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n}\n.Box-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n}\n.Box-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n}\n\n.Box-narrow-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginBlockStart--none {\n margin-block-start: 0;\n}\n.Box-narrow-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n}\n.Box-narrow-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n}\n.Box-narrow-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n}\n.Box-narrow-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n}\n.Box-narrow-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n}\n.Box-narrow-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n}\n.Box-narrow-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n}\n.Box-narrow-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n}\n.Box-narrow-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n}\n.Box-narrow-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n}\n.Box-narrow-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n}\n.Box-narrow-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n}\n.Box-narrow-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n}\n.Box-narrow-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n}\n.Box-narrow-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n}\n.Box-narrow-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n}\n.Box-narrow-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginBlockStart--none {\n margin-block-start: 0;\n }\n .Box-regular-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n }\n .Box-regular-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n }\n .Box-regular-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n }\n .Box-regular-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n }\n .Box-regular-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n }\n .Box-regular-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n }\n .Box-regular-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n }\n .Box-regular-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n }\n .Box-regular-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n }\n .Box-regular-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n }\n .Box-regular-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n }\n .Box-regular-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n }\n .Box-regular-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n }\n .Box-regular-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n }\n .Box-regular-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n }\n .Box-regular-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n }\n .Box-regular-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginBlockStart--none {\n margin-block-start: 0;\n }\n .Box-wide-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n }\n .Box-wide-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n }\n .Box-wide-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n }\n .Box-wide-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n }\n .Box-wide-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n }\n .Box-wide-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n }\n .Box-wide-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n }\n .Box-wide-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n }\n .Box-wide-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n }\n .Box-wide-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n }\n .Box-wide-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n }\n .Box-wide-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n }\n .Box-wide-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n }\n .Box-wide-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n }\n .Box-wide-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n }\n .Box-wide-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n }\n .Box-wide-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n }\n}\n\n/\n 8. Margin Right\n /\n.Box-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginInlineEnd--none {\n margin-inline-end: 0;\n}\n.Box-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n}\n.Box-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n}\n.Box-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n}\n.Box-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n}\n.Box-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n}\n.Box-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n}\n.Box-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n}\n.Box-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n}\n.Box-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n}\n.Box-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n}\n.Box-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n}\n.Box-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n}\n.Box-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n}\n.Box-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n}\n.Box-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n}\n.Box-marginInlineEnd--112 {\n margin-inline-end: var(--base-size-112);\n}\n.Box-marginInlineEnd--128 {\n margin-inline-end: var(--base-size-128);\n}\n\n.Box-narrow-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginInlineEnd--none {\n margin-inline-end: 0;\n}\n.Box-narrow-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n}\n.Box-narrow-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n}\n.Box-narrow-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n}\n.Box-narrow-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n}\n.Box-narrow-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n}\n.Box-narrow-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n}\n.Box-narrow-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n}\n.Box-narrow-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n}\n.Box-narrow-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n}\n.Box-narrow-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n}\n.Box-narrow-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n}\n.Box-narrow-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n}\n.Box-narrow-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n}\n.Box-narrow-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n}\n.Box-narrow-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginInlineEnd--none {\n margin-inline-end: 0;\n }\n .Box-regular-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n }\n .Box-regular-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n }\n .Box-regular-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n }\n .Box-regular-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n }\n .Box-regular-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n }\n .Box-regular-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n }\n .Box-regular-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n }\n .Box-regular-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n }\n .Box-regular-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n }\n .Box-regular-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n }\n .Box-regular-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n }\n .Box-regular-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n }\n .Box-regular-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n }\n .Box-regular-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n }\n .Box-regular-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginInlineEnd--none {\n margin-inline-end: 0;\n }\n .Box-wide-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n }\n .Box-wide-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n }\n .Box-wide-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n }\n .Box-wide-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n }\n .Box-wide-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n }\n .Box-wide-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n }\n .Box-wide-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n }\n .Box-wide-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n }\n .Box-wide-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n }\n .Box-wide-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n }\n .Box-wide-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n }\n .Box-wide-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n }\n .Box-wide-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n }\n .Box-wide-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n }\n .Box-wide-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n }\n}\n/\n 9. Margin bottom\n /\n.Box-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n}\n.Box-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginBlockEnd--none {\n margin-block-end: 0;\n}\n.Box-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n}\n.Box-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n}\n.Box-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n}\n.Box-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n}\n.Box-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n}\n.Box-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n}\n.Box-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n}\n.Box-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n}\n.Box-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n}\n.Box-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n}\n.Box-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n}\n.Box-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n}\n.Box-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n}\n.Box-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n}\n.Box-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n}\n.Box-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n}\n.Box-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n}\n\n.Box-narrow-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginBlockEnd--none {\n margin-block-end: 0;\n}\n.Box-narrow-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n}\n.Box-narrow-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n}\n.Box-narrow-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n}\n.Box-narrow-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n}\n.Box-narrow-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n}\n.Box-narrow-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n}\n.Box-narrow-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n}\n.Box-narrow-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n}\n.Box-narrow-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n}\n.Box-narrow-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n}\n.Box-narrow-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n}\n.Box-narrow-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n}\n.Box-narrow-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n}\n.Box-narrow-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n}\n.Box-narrow-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginBlockEnd--none {\n margin-block-end: 0;\n }\n .Box-regular-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n }\n .Box-regular-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n }\n .Box-regular-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n }\n .Box-regular-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n }\n .Box-regular-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n }\n .Box-regular-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n }\n .Box-regular-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n }\n .Box-regular-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n }\n .Box-regular-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n }\n .Box-regular-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n }\n .Box-regular-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n }\n .Box-regular-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n }\n .Box-regular-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n }\n .Box-regular-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n }\n .Box-regular-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n }\n .Box-regular-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n }\n .Box-regular-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginBlockEnd--none {\n margin-block-end: 0;\n }\n .Box-wide-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n }\n .Box-wide-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n }\n .Box-wide-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n }\n .Box-wide-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n }\n .Box-wide-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n }\n .Box-wide-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n }\n .Box-wide-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n }\n .Box-wide-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n }\n .Box-wide-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n }\n .Box-wide-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n }\n .Box-wide-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n }\n .Box-wide-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n }\n .Box-wide-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n }\n .Box-wide-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n }\n .Box-wide-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n }\n .Box-wide-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n }\n .Box-wide-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n }\n}\n\n/\n 10. Margin Left\n /\n.Box-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginInlineStart--none {\n margin-inline-start: 0;\n}\n.Box-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n}\n.Box-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n}\n.Box-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n}\n.Box-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n}\n.Box-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n}\n.Box-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n}\n.Box-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n}\n.Box-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n}\n.Box-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n}\n.Box-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n}\n.Box-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n}\n.Box-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n}\n.Box-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n}\n.Box-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n}\n.Box-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n}\n.Box-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n}\n.Box-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n}\n\n.Box-narrow-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginInlineStart--none {\n margin-inline-start: 0;\n}\n.Box-narrow-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n}\n.Box-narrow-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n}\n.Box-narrow-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n}\n.Box-narrow-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n}\n.Box-narrow-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n}\n.Box-narrow-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n}\n.Box-narrow-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n}\n.Box-narrow-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n}\n.Box-narrow-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n}\n.Box-narrow-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n}\n.Box-narrow-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n}\n.Box-narrow-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n}\n.Box-narrow-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n}\n.Box-narrow-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n}\n.Box-narrow-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n}\n.Box-narrow-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n}\n.Box-narrow-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginInlineStart--none {\n margin-inline-start: 0;\n }\n .Box-regular-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n }\n .Box-regular-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n }\n .Box-regular-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n }\n .Box-regular-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n }\n .Box-regular-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n }\n .Box-regular-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n }\n .Box-regular-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n }\n .Box-regular-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n }\n .Box-regular-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n }\n .Box-regular-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n }\n .Box-regular-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n }\n .Box-regular-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n }\n .Box-regular-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n }\n .Box-regular-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n }\n .Box-regular-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n }\n .Box-regular-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n }\n .Box-regular-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginInlineStart--none {\n margin-inline-start: 0;\n }\n .Box-wide-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n }\n .Box-wide-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n }\n .Box-wide-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n }\n .Box-wide-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n }\n .Box-wide-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n }\n .Box-wide-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n }\n .Box-wide-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n }\n .Box-wide-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n }\n .Box-wide-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n }\n .Box-wide-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n }\n .Box-wide-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n }\n .Box-wide-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n }\n .Box-wide-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n }\n .Box-wide-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n }\n .Box-wide-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n }\n .Box-wide-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n }\n .Box-wide-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n }\n}\n\n/\n 11. Background Color\n /\n.Box-backgroundColor--default {\n background-color: var(--brand-color-canvas-default);\n}\n\n.Box-backgroundColor--inset {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.Box-backgroundColor--subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Box-backgroundColor--overlay {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n/\n* 12. Border Radius\n/\n.Box-borderRadius--small {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Box-borderRadius--medium {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Box-borderRadius--large {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Box-borderRadius--xlarge {\n border-radius: var(--brand-borderRadius-xlarge);\n}\n\n.Box-borderRadius--full {\n border-radius: var(--brand-borderRadius-full);\n}\n\n/\n* 13. Border Style (must come before width so width can override)\n/\n.Box-borderStyle--solid {\n border-style: solid;\n border-width: 0; / Reset all sides so individual side props work correctly /\n}\n\n.Box-borderStyle--none {\n border-style: none;\n}\n\n/\n* 14. Border Width\n/\n.Box-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n}\n\n/ Border width: none options /\n.Box-borderWidth--none {\n border-width: 0;\n}\n\n.Box-borderBlockStartWidth--none {\n border-block-start-width: 0;\n}\n\n.Box-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n}\n\n.Box-borderBlockEndWidth--none {\n border-block-end-width: 0;\n}\n\n.Box-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n}\n\n/ Responsive border width: narrow (mobile-first, no media query) /\n.Box-narrow-borderWidth--none {\n border-width: 0;\n}\n.Box-narrow-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderBlockStartWidth--none {\n border-block-start-width: 0;\n}\n.Box-narrow-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n}\n.Box-narrow-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderBlockEndWidth--none {\n border-block-end-width: 0;\n}\n.Box-narrow-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n}\n.Box-narrow-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n}\n\n/ Responsive border width: regular (tablet+) /\n@media screen and (min-width: 48rem) {\n .Box-regular-borderWidth--none {\n border-width: 0;\n }\n .Box-regular-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderBlockStartWidth--none {\n border-block-start-width: 0;\n }\n .Box-regular-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n }\n .Box-regular-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderBlockEndWidth--none {\n border-block-end-width: 0;\n }\n .Box-regular-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n }\n .Box-regular-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n }\n}\n\n/ Responsive border width: wide (desktop+) /\n@media screen and (min-width: 64rem) {\n .Box-wide-borderWidth--none {\n border-width: 0;\n }\n .Box-wide-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderBlockStartWidth--none {\n border-block-start-width: 0;\n }\n .Box-wide-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n }\n .Box-wide-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderBlockEndWidth--none {\n border-block-end-width: 0;\n }\n .Box-wide-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n }\n .Box-wide-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n }\n}\n\n/\n* 14. Border Color\n*/\n.Box-borderColor--default {\n border-color: var(--brand-color-border-default);\n}\n\n.Box-borderColor--muted {\n border-color: var(--brand-color-border-muted);\n}\n\n.Box-borderColor--subtle {\n border-color: var(--brand-color-border-subtle);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Box.module.js","names":[],"sources":["../../src/Box/Box.module.css"],"sourcesContent":["/* ---------------------------------------------------------- /\n/ Box component table of contents /\n/ Please ensure that this is kept up to date as the /\n/ component evolves. /\n/ ---------------------------------------------------------- /\n/ Table of contents: /\n/ 1. Padding /\n/ 2. Padding Top /\n/ 3. Padding Right /\n/ 4. Padding Bottom /\n/ 5. Padding Left /\n/ 6. Margin /\n/ 7. Margin Top /\n/ 8. Margin Right /\n/ 9. Margin Bottom /\n/ 10. Margin Left /\n/ 11. Background Colors /\n/ 12. Border Radius /\n/ 13. Border Width /\n/ 14. Border Color /\n/ 15. Border Style /\n/ ---------------------------------------------------------- /\n\n/\n 1. Padding\n /\n.Box-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Box-padding--normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Box-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n}\n\n.Box-padding--none {\n padding: 0;\n}\n\n.Box-padding--4 {\n padding: var(--base-size-4);\n}\n.Box-padding--8 {\n padding: var(--base-size-8);\n}\n.Box-padding--12 {\n padding: var(--base-size-12);\n}\n.Box-padding--16 {\n padding: var(--base-size-16);\n}\n.Box-padding--20 {\n padding: var(--base-size-20);\n}\n.Box-padding--24 {\n padding: var(--base-size-24);\n}\n.Box-padding--28 {\n padding: var(--base-size-28);\n}\n.Box-padding--32 {\n padding: var(--base-size-32);\n}\n.Box-padding--36 {\n padding: var(--base-size-36);\n}\n.Box-padding--40 {\n padding: var(--base-size-40);\n}\n.Box-padding--44 {\n padding: var(--base-size-44);\n}\n.Box-padding--48 {\n padding: var(--base-size-48);\n}\n.Box-padding--60 {\n padding: var(--base-size-60);\n}\n.Box-padding--64 {\n padding: var(--base-size-64);\n}\n.Box-padding--80 {\n padding: var(--base-size-80);\n}\n.Box-padding--88 {\n padding: var(--base-size-88);\n}\n.Box-padding--96 {\n padding: var(--base-size-96);\n}\n.Box-padding--112 {\n padding: var(--base-size-112);\n}\n.Box-padding--128 {\n padding: var(--base-size-128);\n}\n.Box-narrow-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-padding--normal {\n padding: var(--brand-box-spacing-normal);\n}\n.Box-narrow-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-padding--none {\n padding: 0;\n}\n\n.Box-narrow-padding--4 {\n padding: var(--base-size-4);\n}\n.Box-narrow-padding--8 {\n padding: var(--base-size-8);\n}\n.Box-narrow-padding--12 {\n padding: var(--base-size-12);\n}\n.Box-narrow-padding--16 {\n padding: var(--base-size-16);\n}\n.Box-narrow-padding--20 {\n padding: var(--base-size-20);\n}\n.Box-narrow-padding--24 {\n padding: var(--base-size-24);\n}\n.Box-narrow-padding--28 {\n padding: var(--base-size-28);\n}\n.Box-narrow-padding--32 {\n padding: var(--base-size-32);\n}\n.Box-narrow-padding--36 {\n padding: var(--base-size-36);\n}\n.Box-narrow-padding--40 {\n padding: var(--base-size-40);\n}\n.Box-narrow-padding--44 {\n padding: var(--base-size-44);\n}\n.Box-narrow-padding--48 {\n padding: var(--base-size-48);\n}\n.Box-narrow-padding--60 {\n padding: var(--base-size-60);\n}\n.Box-narrow-padding--64 {\n padding: var(--base-size-64);\n}\n.Box-narrow-padding--80 {\n padding: var(--base-size-80);\n}\n.Box-narrow-padding--88 {\n padding: var(--base-size-88);\n}\n.Box-narrow-padding--96 {\n padding: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n }\n .Box-regular-padding--normal {\n padding: var(--brand-box-spacing-normal);\n }\n .Box-regular-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-padding--none {\n padding: 0;\n }\n .Box-regular-padding--4 {\n padding: var(--base-size-4);\n }\n .Box-regular-padding--8 {\n padding: var(--base-size-8);\n }\n .Box-regular-padding--12 {\n padding: var(--base-size-12);\n }\n .Box-regular-padding--16 {\n padding: var(--base-size-16);\n }\n .Box-regular-padding--20 {\n padding: var(--base-size-20);\n }\n .Box-regular-padding--24 {\n padding: var(--base-size-24);\n }\n .Box-regular-padding--28 {\n padding: var(--base-size-28);\n }\n .Box-regular-padding--32 {\n padding: var(--base-size-32);\n }\n .Box-regular-padding--36 {\n padding: var(--base-size-36);\n }\n .Box-regular-padding--40 {\n padding: var(--base-size-40);\n }\n .Box-regular-padding--44 {\n padding: var(--base-size-44);\n }\n .Box-regular-padding--48 {\n padding: var(--base-size-48);\n }\n .Box-regular-padding--60 {\n padding: var(--base-size-60);\n }\n .Box-regular-padding--64 {\n padding: var(--base-size-64);\n }\n .Box-regular-padding--80 {\n padding: var(--base-size-80);\n }\n .Box-regular-padding--88 {\n padding: var(--base-size-88);\n }\n .Box-regular-padding--96 {\n padding: var(--base-size-96);\n }\n .Box-regular-padding--112 {\n padding: var(--base-size-112);\n }\n .Box-regular-padding--128 {\n padding: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-padding--condensed {\n padding: var(--brand-box-spacing-condensed);\n }\n .Box-wide-padding--normal {\n padding: var(--brand-box-spacing-normal);\n }\n .Box-wide-padding--spacious {\n padding: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-padding--none {\n padding: 0;\n }\n .Box-wide-padding--4 {\n padding: var(--base-size-4);\n }\n .Box-wide-padding--8 {\n padding: var(--base-size-8);\n }\n .Box-wide-padding--12 {\n padding: var(--base-size-12);\n }\n .Box-wide-padding--16 {\n padding: var(--base-size-16);\n }\n .Box-wide-padding--20 {\n padding: var(--base-size-20);\n }\n .Box-wide-padding--24 {\n padding: var(--base-size-24);\n }\n .Box-wide-padding--28 {\n padding: var(--base-size-28);\n }\n .Box-wide-padding--32 {\n padding: var(--base-size-32);\n }\n .Box-wide-padding--36 {\n padding: var(--base-size-36);\n }\n .Box-wide-padding--40 {\n padding: var(--base-size-40);\n }\n .Box-wide-padding--44 {\n padding: var(--base-size-44);\n }\n .Box-wide-padding--48 {\n padding: var(--base-size-48);\n }\n .Box-wide-padding--60 {\n padding: var(--base-size-60);\n }\n .Box-wide-padding--64 {\n padding: var(--base-size-64);\n }\n .Box-wide-padding--80 {\n padding: var(--base-size-80);\n }\n .Box-wide-padding--88 {\n padding: var(--base-size-88);\n }\n .Box-wide-padding--96 {\n padding: var(--base-size-96);\n }\n .Box-wide-padding--112 {\n padding: var(--base-size-112);\n }\n .Box-wide-padding--128 {\n padding: var(--base-size-128);\n }\n}\n\n/\n 2. Padding Top\n /\n.Box-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n}\n.Box-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingBlockStart--none {\n padding-block-start: 0;\n}\n.Box-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n}\n.Box-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n}\n.Box-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n}\n.Box-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n}\n.Box-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n}\n.Box-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n}\n.Box-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n}\n.Box-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n}\n.Box-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n}\n.Box-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n}\n.Box-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n}\n.Box-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n}\n.Box-paddingBlockStart--60 {\n padding-block-start: var(--base-size-60);\n}\n.Box-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n}\n.Box-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n}\n.Box-paddingBlockStart--88 {\n padding-block-start: var(--base-size-88);\n}\n.Box-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n}\n.Box-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n}\n.Box-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n}\n\n.Box-narrow-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingBlockStart--none {\n padding-block-start: 0;\n}\n\n.Box-narrow-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n}\n.Box-narrow-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n}\n.Box-narrow-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n}\n.Box-narrow-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n}\n.Box-narrow-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n}\n.Box-narrow-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n}\n.Box-narrow-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n}\n.Box-narrow-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n}\n.Box-narrow-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n}\n.Box-narrow-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n}\n.Box-narrow-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n}\n.Box-narrow-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n}\n.Box-narrow-paddingBlockStart--60 {\n padding-block-start: var(--base-size-60);\n}\n.Box-narrow-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n}\n.Box-narrow-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n}\n.Box-narrow-paddingBlockStart--88 {\n padding-block-start: var(--base-size-88);\n}\n.Box-narrow-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n}\n.Box-narrow-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n}\n.Box-narrow-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingBlockStart--none {\n padding-block-start: 0;\n }\n .Box-regular-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n }\n .Box-regular-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n }\n .Box-regular-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n }\n .Box-regular-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n }\n .Box-regular-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n }\n .Box-regular-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n }\n .Box-regular-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n }\n .Box-regular-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n }\n .Box-regular-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n }\n .Box-regular-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n }\n .Box-regular-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n }\n .Box-regular-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n }\n .Box-regular-paddingBlockStart--60 {\n padding-block-start: var(--base-size-60);\n }\n .Box-regular-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n }\n .Box-regular-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n }\n .Box-regular-paddingBlockStart--88 {\n padding-block-start: var(--base-size-88);\n }\n .Box-regular-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n }\n .Box-regular-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n }\n .Box-regular-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingBlockStart--condensed {\n padding-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingBlockStart--normal {\n padding-block-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingBlockStart--spacious {\n padding-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingBlockStart--none {\n padding-block-start: 0;\n }\n .Box-wide-paddingBlockStart--4 {\n padding-block-start: var(--base-size-4);\n }\n .Box-wide-paddingBlockStart--8 {\n padding-block-start: var(--base-size-8);\n }\n .Box-wide-paddingBlockStart--12 {\n padding-block-start: var(--base-size-12);\n }\n .Box-wide-paddingBlockStart--16 {\n padding-block-start: var(--base-size-16);\n }\n .Box-wide-paddingBlockStart--20 {\n padding-block-start: var(--base-size-20);\n }\n .Box-wide-paddingBlockStart--24 {\n padding-block-start: var(--base-size-24);\n }\n .Box-wide-paddingBlockStart--28 {\n padding-block-start: var(--base-size-28);\n }\n .Box-wide-paddingBlockStart--32 {\n padding-block-start: var(--base-size-32);\n }\n .Box-wide-paddingBlockStart--36 {\n padding-block-start: var(--base-size-36);\n }\n .Box-wide-paddingBlockStart--40 {\n padding-block-start: var(--base-size-40);\n }\n .Box-wide-paddingBlockStart--44 {\n padding-block-start: var(--base-size-44);\n }\n .Box-wide-paddingBlockStart--48 {\n padding-block-start: var(--base-size-48);\n }\n .Box-wide-paddingBlockStart--60 {\n padding-block-start: var(--base-size-60);\n }\n .Box-wide-paddingBlockStart--64 {\n padding-block-start: var(--base-size-64);\n }\n .Box-wide-paddingBlockStart--80 {\n padding-block-start: var(--base-size-80);\n }\n .Box-wide-paddingBlockStart--88 {\n padding-block-start: var(--base-size-88);\n }\n .Box-wide-paddingBlockStart--96 {\n padding-block-start: var(--base-size-96);\n }\n .Box-wide-paddingBlockStart--112 {\n padding-block-start: var(--base-size-112);\n }\n .Box-wide-paddingBlockStart--128 {\n padding-block-start: var(--base-size-128);\n }\n}\n\n/\n 3. Padding Right\n /\n.Box-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingInlineEnd--none {\n padding-inline-end: 0;\n}\n.Box-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n}\n.Box-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n}\n.Box-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n}\n.Box-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n}\n.Box-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n}\n.Box-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n}\n.Box-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n}\n.Box-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n}\n.Box-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n}\n.Box-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n}\n.Box-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n}\n.Box-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n}\n.Box-paddingInlineEnd--60 {\n padding-inline-end: var(--base-size-60);\n}\n.Box-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n}\n.Box-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n}\n.Box-paddingInlineEnd--88 {\n padding-inline-end: var(--base-size-88);\n}\n.Box-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n}\n.Box-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n}\n.Box-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n}\n\n.Box-narrow-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingInlineEnd--none {\n padding-inline-end: 0;\n}\n.Box-narrow-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n}\n.Box-narrow-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n}\n.Box-narrow-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n}\n.Box-narrow-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n}\n.Box-narrow-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n}\n.Box-narrow-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n}\n.Box-narrow-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n}\n.Box-narrow-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n}\n.Box-narrow-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n}\n.Box-narrow-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n}\n.Box-narrow-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n}\n.Box-narrow-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n}\n.Box-narrow-paddingInlineEnd--60 {\n padding-inline-end: var(--base-size-60);\n}\n.Box-narrow-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n}\n.Box-narrow-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n}\n.Box-narrow-paddingInlineEnd--88 {\n padding-inline-end: var(--base-size-88);\n}\n.Box-narrow-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingInlineEnd--none {\n padding-inline-end: 0;\n }\n .Box-regular-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n }\n .Box-regular-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n }\n .Box-regular-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n }\n .Box-regular-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n }\n .Box-regular-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n }\n .Box-regular-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n }\n .Box-regular-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n }\n .Box-regular-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n }\n .Box-regular-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n }\n .Box-regular-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n }\n .Box-regular-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n }\n .Box-regular-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n }\n .Box-regular-paddingInlineEnd--60 {\n padding-inline-end: var(--base-size-60);\n }\n .Box-regular-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n }\n .Box-regular-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n }\n .Box-regular-paddingInlineEnd--88 {\n padding-inline-end: var(--base-size-88);\n }\n .Box-regular-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n }\n .Box-regular-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n }\n .Box-regular-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingInlineEnd--condensed {\n padding-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingInlineEnd--normal {\n padding-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingInlineEnd--spacious {\n padding-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingInlineEnd--none {\n padding-inline-end: 0;\n }\n .Box-wide-paddingInlineEnd--4 {\n padding-inline-end: var(--base-size-4);\n }\n .Box-wide-paddingInlineEnd--8 {\n padding-inline-end: var(--base-size-8);\n }\n .Box-wide-paddingInlineEnd--12 {\n padding-inline-end: var(--base-size-12);\n }\n .Box-wide-paddingInlineEnd--16 {\n padding-inline-end: var(--base-size-16);\n }\n .Box-wide-paddingInlineEnd--20 {\n padding-inline-end: var(--base-size-20);\n }\n .Box-wide-paddingInlineEnd--24 {\n padding-inline-end: var(--base-size-24);\n }\n .Box-wide-paddingInlineEnd--28 {\n padding-inline-end: var(--base-size-28);\n }\n .Box-wide-paddingInlineEnd--32 {\n padding-inline-end: var(--base-size-32);\n }\n .Box-wide-paddingInlineEnd--36 {\n padding-inline-end: var(--base-size-36);\n }\n .Box-wide-paddingInlineEnd--40 {\n padding-inline-end: var(--base-size-40);\n }\n .Box-wide-paddingInlineEnd--44 {\n padding-inline-end: var(--base-size-44);\n }\n .Box-wide-paddingInlineEnd--48 {\n padding-inline-end: var(--base-size-48);\n }\n .Box-wide-paddingInlineEnd--60 {\n padding-inline-end: var(--base-size-60);\n }\n .Box-wide-paddingInlineEnd--64 {\n padding-inline-end: var(--base-size-64);\n }\n .Box-wide-paddingInlineEnd--80 {\n padding-inline-end: var(--base-size-80);\n }\n .Box-wide-paddingInlineEnd--88 {\n padding-inline-end: var(--base-size-88);\n }\n .Box-wide-paddingInlineEnd--96 {\n padding-inline-end: var(--base-size-96);\n }\n .Box-wide-paddingInlineEnd--112 {\n padding-inline-end: var(--base-size-112);\n }\n .Box-wide-paddingInlineEnd--128 {\n padding-inline-end: var(--base-size-128);\n }\n}\n/\n 4. Padding bottom\n /\n.Box-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n}\n.Box-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingBlockEnd--none {\n padding-block-end: 0;\n}\n.Box-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n}\n.Box-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n}\n.Box-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n}\n.Box-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n}\n.Box-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n}\n.Box-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n}\n.Box-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n}\n.Box-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n}\n.Box-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n}\n.Box-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n}\n.Box-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n}\n.Box-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n}\n.Box-paddingBlockEnd--60 {\n padding-block-end: var(--base-size-60);\n}\n.Box-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n}\n.Box-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n}\n.Box-paddingBlockEnd--88 {\n padding-block-end: var(--base-size-88);\n}\n.Box-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n}\n.Box-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n}\n.Box-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n}\n\n.Box-narrow-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingBlockEnd--none {\n padding-block-end: 0;\n}\n.Box-narrow-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n}\n.Box-narrow-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n}\n.Box-narrow-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n}\n.Box-narrow-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n}\n.Box-narrow-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n}\n.Box-narrow-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n}\n.Box-narrow-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n}\n.Box-narrow-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n}\n.Box-narrow-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n}\n.Box-narrow-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n}\n.Box-narrow-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n}\n.Box-narrow-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n}\n.Box-narrow-paddingBlockEnd--60 {\n padding-block-end: var(--base-size-60);\n}\n.Box-narrow-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n}\n.Box-narrow-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n}\n.Box-narrow-paddingBlockEnd--88 {\n padding-block-end: var(--base-size-88);\n}\n.Box-narrow-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n}\n.Box-narrow-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n}\n.Box-narrow-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingBlockEnd--none {\n padding-block-end: 0;\n }\n .Box-regular-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n }\n .Box-regular-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n }\n .Box-regular-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n }\n .Box-regular-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n }\n .Box-regular-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n }\n .Box-regular-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n }\n .Box-regular-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n }\n .Box-regular-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n }\n .Box-regular-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n }\n .Box-regular-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n }\n .Box-regular-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n }\n .Box-regular-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n }\n .Box-regular-paddingBlockEnd--60 {\n padding-block-end: var(--base-size-60);\n }\n .Box-regular-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n }\n .Box-regular-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n }\n .Box-regular-paddingBlockEnd--88 {\n padding-block-end: var(--base-size-88);\n }\n .Box-regular-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n }\n .Box-regular-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n }\n .Box-regular-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingBlockEnd--condensed {\n padding-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingBlockEnd--normal {\n padding-block-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingBlockEnd--spacious {\n padding-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingBlockEnd--none {\n padding-block-end: 0;\n }\n .Box-wide-paddingBlockEnd--4 {\n padding-block-end: var(--base-size-4);\n }\n .Box-wide-paddingBlockEnd--8 {\n padding-block-end: var(--base-size-8);\n }\n .Box-wide-paddingBlockEnd--12 {\n padding-block-end: var(--base-size-12);\n }\n .Box-wide-paddingBlockEnd--16 {\n padding-block-end: var(--base-size-16);\n }\n .Box-wide-paddingBlockEnd--20 {\n padding-block-end: var(--base-size-20);\n }\n .Box-wide-paddingBlockEnd--24 {\n padding-block-end: var(--base-size-24);\n }\n .Box-wide-paddingBlockEnd--28 {\n padding-block-end: var(--base-size-28);\n }\n .Box-wide-paddingBlockEnd--32 {\n padding-block-end: var(--base-size-32);\n }\n .Box-wide-paddingBlockEnd--36 {\n padding-block-end: var(--base-size-36);\n }\n .Box-wide-paddingBlockEnd--40 {\n padding-block-end: var(--base-size-40);\n }\n .Box-wide-paddingBlockEnd--44 {\n padding-block-end: var(--base-size-44);\n }\n .Box-wide-paddingBlockEnd--48 {\n padding-block-end: var(--base-size-48);\n }\n .Box-wide-paddingBlockEnd--60 {\n padding-block-end: var(--base-size-60);\n }\n .Box-wide-paddingBlockEnd--64 {\n padding-block-end: var(--base-size-64);\n }\n .Box-wide-paddingBlockEnd--80 {\n padding-block-end: var(--base-size-80);\n }\n .Box-wide-paddingBlockEnd--88 {\n padding-block-end: var(--base-size-88);\n }\n .Box-wide-paddingBlockEnd--96 {\n padding-block-end: var(--base-size-96);\n }\n .Box-wide-paddingBlockEnd--112 {\n padding-block-end: var(--base-size-112);\n }\n .Box-wide-paddingBlockEnd--128 {\n padding-block-end: var(--base-size-128);\n }\n}\n\n/\n 5. Padding Left\n /\n.Box-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-paddingInlineStart--none {\n padding-inline-start: 0;\n}\n.Box-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n}\n.Box-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n}\n.Box-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n}\n.Box-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n}\n.Box-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n}\n.Box-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n}\n.Box-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n}\n.Box-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n}\n.Box-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n}\n.Box-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n}\n.Box-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n}\n.Box-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n}\n.Box-paddingInlineStart--60 {\n padding-inline-start: var(--base-size-60);\n}\n.Box-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n}\n.Box-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n}\n.Box-paddingInlineStart--88 {\n padding-inline-start: var(--base-size-88);\n}\n.Box-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n}\n.Box-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n}\n.Box-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n}\n\n.Box-narrow-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-paddingInlineStart--none {\n padding-inline-start: 0;\n}\n.Box-narrow-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n}\n.Box-narrow-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n}\n.Box-narrow-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n}\n.Box-narrow-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n}\n.Box-narrow-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n}\n.Box-narrow-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n}\n.Box-narrow-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n}\n.Box-narrow-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n}\n.Box-narrow-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n}\n.Box-narrow-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n}\n.Box-narrow-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n}\n.Box-narrow-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n}\n.Box-narrow-paddingInlineStart--60 {\n padding-inline-start: var(--base-size-60);\n}\n.Box-narrow-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n}\n.Box-narrow-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n}\n.Box-narrow-paddingInlineStart--88 {\n padding-inline-start: var(--base-size-88);\n}\n.Box-narrow-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n}\n.Box-narrow-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n}\n.Box-narrow-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-paddingInlineStart--none {\n padding-inline-start: 0;\n }\n .Box-regular-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n }\n .Box-regular-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n }\n .Box-regular-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n }\n .Box-regular-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n }\n .Box-regular-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n }\n .Box-regular-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n }\n .Box-regular-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n }\n .Box-regular-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n }\n .Box-regular-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n }\n .Box-regular-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n }\n .Box-regular-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n }\n .Box-regular-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n }\n .Box-regular-paddingInlineStart--60 {\n padding-inline-start: var(--base-size-60);\n }\n .Box-regular-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n }\n .Box-regular-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n }\n .Box-regular-paddingInlineStart--88 {\n padding-inline-start: var(--base-size-88);\n }\n .Box-regular-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n }\n .Box-regular-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n }\n .Box-regular-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-paddingInlineStart--condensed {\n padding-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-paddingInlineStart--normal {\n padding-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-paddingInlineStart--spacious {\n padding-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-paddingInlineStart--none {\n padding-inline-start: 0;\n }\n .Box-wide-paddingInlineStart--4 {\n padding-inline-start: var(--base-size-4);\n }\n .Box-wide-paddingInlineStart--8 {\n padding-inline-start: var(--base-size-8);\n }\n .Box-wide-paddingInlineStart--12 {\n padding-inline-start: var(--base-size-12);\n }\n .Box-wide-paddingInlineStart--16 {\n padding-inline-start: var(--base-size-16);\n }\n .Box-wide-paddingInlineStart--20 {\n padding-inline-start: var(--base-size-20);\n }\n .Box-wide-paddingInlineStart--24 {\n padding-inline-start: var(--base-size-24);\n }\n .Box-wide-paddingInlineStart--28 {\n padding-inline-start: var(--base-size-28);\n }\n .Box-wide-paddingInlineStart--32 {\n padding-inline-start: var(--base-size-32);\n }\n .Box-wide-paddingInlineStart--36 {\n padding-inline-start: var(--base-size-36);\n }\n .Box-wide-paddingInlineStart--40 {\n padding-inline-start: var(--base-size-40);\n }\n .Box-wide-paddingInlineStart--44 {\n padding-inline-start: var(--base-size-44);\n }\n .Box-wide-paddingInlineStart--48 {\n padding-inline-start: var(--base-size-48);\n }\n .Box-wide-paddingInlineStart--60 {\n padding-inline-start: var(--base-size-60);\n }\n .Box-wide-paddingInlineStart--64 {\n padding-inline-start: var(--base-size-64);\n }\n .Box-wide-paddingInlineStart--80 {\n padding-inline-start: var(--base-size-80);\n }\n .Box-wide-paddingInlineStart--88 {\n padding-inline-start: var(--base-size-88);\n }\n .Box-wide-paddingInlineStart--96 {\n padding-inline-start: var(--base-size-96);\n }\n .Box-wide-paddingInlineStart--112 {\n padding-inline-start: var(--base-size-112);\n }\n .Box-wide-paddingInlineStart--128 {\n padding-inline-start: var(--base-size-128);\n }\n}\n\n/\n 6. Margin\n /\n.Box-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n}\n.Box-margin--normal {\n margin: var(--brand-box-spacing-normal);\n}\n.Box-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n}\n\n.Box-margin--none {\n margin: 0;\n}\n.Box-margin--4 {\n margin: var(--base-size-4);\n}\n.Box-margin--8 {\n margin: var(--base-size-8);\n}\n.Box-margin--12 {\n margin: var(--base-size-12);\n}\n.Box-margin--16 {\n margin: var(--base-size-16);\n}\n.Box-margin--20 {\n margin: var(--base-size-20);\n}\n.Box-margin--24 {\n margin: var(--base-size-24);\n}\n.Box-margin--28 {\n margin: var(--base-size-28);\n}\n.Box-margin--32 {\n margin: var(--base-size-32);\n}\n.Box-margin--36 {\n margin: var(--base-size-36);\n}\n.Box-margin--40 {\n margin: var(--base-size-40);\n}\n.Box-margin--44 {\n margin: var(--base-size-44);\n}\n.Box-margin--48 {\n margin: var(--base-size-48);\n}\n.Box-margin--60 {\n margin: var(--base-size-60);\n}\n.Box-margin--64 {\n margin: var(--base-size-64);\n}\n.Box-margin--80 {\n margin: var(--base-size-80);\n}\n.Box-margin--88 {\n margin: var(--base-size-88);\n}\n.Box-margin--96 {\n margin: var(--base-size-96);\n}\n.Box-margin--112 {\n margin: var(--base-size-112);\n}\n.Box-margin--128 {\n margin: var(--base-size-128);\n}\n.Box-narrow-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-margin--normal {\n margin: var(--brand-box-spacing-normal);\n}\n.Box-narrow-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-margin--none {\n margin: 0;\n}\n.Box-narrow-margin--4 {\n margin: var(--base-size-4);\n}\n.Box-narrow-margin--8 {\n margin: var(--base-size-8);\n}\n.Box-narrow-margin--12 {\n margin: var(--base-size-12);\n}\n.Box-narrow-margin--16 {\n margin: var(--base-size-16);\n}\n.Box-narrow-margin--20 {\n margin: var(--base-size-20);\n}\n.Box-narrow-margin--24 {\n margin: var(--base-size-24);\n}\n.Box-narrow-margin--28 {\n margin: var(--base-size-28);\n}\n.Box-narrow-margin--32 {\n margin: var(--base-size-32);\n}\n.Box-narrow-margin--36 {\n margin: var(--base-size-36);\n}\n.Box-narrow-margin--40 {\n margin: var(--base-size-40);\n}\n.Box-narrow-margin--44 {\n margin: var(--base-size-44);\n}\n.Box-narrow-margin--48 {\n margin: var(--base-size-48);\n}\n.Box-narrow-margin--60 {\n margin: var(--base-size-60);\n}\n.Box-narrow-margin--64 {\n margin: var(--base-size-64);\n}\n.Box-narrow-margin--80 {\n margin: var(--base-size-80);\n}\n.Box-narrow-margin--88 {\n margin: var(--base-size-88);\n}\n.Box-narrow-margin--96 {\n margin: var(--base-size-96);\n}\n.Box-narrow-margin--112 {\n margin: var(--base-size-112);\n}\n.Box-narrow-margin--128 {\n margin: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n }\n .Box-regular-margin--normal {\n margin: var(--brand-box-spacing-normal);\n }\n .Box-regular-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-margin--none {\n margin: 0;\n }\n .Box-regular-margin--4 {\n margin: var(--base-size-4);\n }\n .Box-regular-margin--8 {\n margin: var(--base-size-8);\n }\n .Box-regular-margin--12 {\n margin: var(--base-size-12);\n }\n .Box-regular-margin--16 {\n margin: var(--base-size-16);\n }\n .Box-regular-margin--20 {\n margin: var(--base-size-20);\n }\n .Box-regular-margin--24 {\n margin: var(--base-size-24);\n }\n .Box-regular-margin--28 {\n margin: var(--base-size-28);\n }\n .Box-regular-margin--32 {\n margin: var(--base-size-32);\n }\n .Box-regular-margin--36 {\n margin: var(--base-size-36);\n }\n .Box-regular-margin--40 {\n margin: var(--base-size-40);\n }\n .Box-regular-margin--44 {\n margin: var(--base-size-44);\n }\n .Box-regular-margin--48 {\n margin: var(--base-size-48);\n }\n .Box-regular-margin--60 {\n margin: var(--base-size-60);\n }\n .Box-regular-margin--64 {\n margin: var(--base-size-64);\n }\n .Box-regular-margin--80 {\n margin: var(--base-size-80);\n }\n .Box-regular-margin--88 {\n margin: var(--base-size-88);\n }\n .Box-regular-margin--96 {\n margin: var(--base-size-96);\n }\n .Box-regular-margin--112 {\n margin: var(--base-size-112);\n }\n .Box-regular-margin--128 {\n margin: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-margin--condensed {\n margin: var(--brand-box-spacing-condensed);\n }\n .Box-wide-margin--normal {\n margin: var(--brand-box-spacing-normal);\n }\n .Box-wide-margin--spacious {\n margin: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-margin--none {\n margin: 0;\n }\n .Box-wide-margin--4 {\n margin: var(--base-size-4);\n }\n .Box-wide-margin--8 {\n margin: var(--base-size-8);\n }\n .Box-wide-margin--12 {\n margin: var(--base-size-12);\n }\n .Box-wide-margin--16 {\n margin: var(--base-size-16);\n }\n .Box-wide-margin--20 {\n margin: var(--base-size-20);\n }\n .Box-wide-margin--24 {\n margin: var(--base-size-24);\n }\n .Box-wide-margin--28 {\n margin: var(--base-size-28);\n }\n .Box-wide-margin--32 {\n margin: var(--base-size-32);\n }\n .Box-wide-margin--36 {\n margin: var(--base-size-36);\n }\n .Box-wide-margin--40 {\n margin: var(--base-size-40);\n }\n .Box-wide-margin--44 {\n margin: var(--base-size-44);\n }\n .Box-wide-margin--48 {\n margin: var(--base-size-48);\n }\n .Box-wide-margin--60 {\n margin: var(--base-size-60);\n }\n .Box-wide-margin--64 {\n margin: var(--base-size-64);\n }\n .Box-wide-margin--80 {\n margin: var(--base-size-80);\n }\n .Box-wide-margin--88 {\n margin: var(--base-size-88);\n }\n .Box-wide-margin--112 {\n margin: var(--base-size-112);\n }\n .Box-wide-margin--128 {\n margin: var(--base-size-128);\n }\n}\n\n/\n 7. Margin Top\n /\n.Box-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n}\n.Box-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginBlockStart--none {\n margin-block-start: 0;\n}\n.Box-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n}\n.Box-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n}\n.Box-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n}\n.Box-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n}\n.Box-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n}\n.Box-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n}\n.Box-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n}\n.Box-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n}\n.Box-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n}\n.Box-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n}\n.Box-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n}\n.Box-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n}\n.Box-marginBlockStart--60 {\n margin-block-start: var(--base-size-60);\n}\n.Box-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n}\n.Box-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n}\n.Box-marginBlockStart--88 {\n margin-block-start: var(--base-size-88);\n}\n.Box-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n}\n.Box-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n}\n.Box-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n}\n\n.Box-narrow-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginBlockStart--none {\n margin-block-start: 0;\n}\n.Box-narrow-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n}\n.Box-narrow-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n}\n.Box-narrow-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n}\n.Box-narrow-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n}\n.Box-narrow-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n}\n.Box-narrow-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n}\n.Box-narrow-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n}\n.Box-narrow-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n}\n.Box-narrow-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n}\n.Box-narrow-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n}\n.Box-narrow-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n}\n.Box-narrow-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n}\n.Box-narrow-marginBlockStart--60 {\n margin-block-start: var(--base-size-60);\n}\n.Box-narrow-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n}\n.Box-narrow-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n}\n.Box-narrow-marginBlockStart--88 {\n margin-block-start: var(--base-size-88);\n}\n.Box-narrow-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n}\n.Box-narrow-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n}\n.Box-narrow-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginBlockStart--none {\n margin-block-start: 0;\n }\n .Box-regular-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n }\n .Box-regular-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n }\n .Box-regular-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n }\n .Box-regular-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n }\n .Box-regular-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n }\n .Box-regular-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n }\n .Box-regular-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n }\n .Box-regular-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n }\n .Box-regular-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n }\n .Box-regular-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n }\n .Box-regular-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n }\n .Box-regular-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n }\n .Box-regular-marginBlockStart--60 {\n margin-block-start: var(--base-size-60);\n }\n .Box-regular-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n }\n .Box-regular-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n }\n .Box-regular-marginBlockStart--88 {\n margin-block-start: var(--base-size-88);\n }\n .Box-regular-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n }\n .Box-regular-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n }\n .Box-regular-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginBlockStart--condensed {\n margin-block-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginBlockStart--normal {\n margin-block-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginBlockStart--spacious {\n margin-block-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginBlockStart--none {\n margin-block-start: 0;\n }\n .Box-wide-marginBlockStart--4 {\n margin-block-start: var(--base-size-4);\n }\n .Box-wide-marginBlockStart--8 {\n margin-block-start: var(--base-size-8);\n }\n .Box-wide-marginBlockStart--12 {\n margin-block-start: var(--base-size-12);\n }\n .Box-wide-marginBlockStart--16 {\n margin-block-start: var(--base-size-16);\n }\n .Box-wide-marginBlockStart--20 {\n margin-block-start: var(--base-size-20);\n }\n .Box-wide-marginBlockStart--24 {\n margin-block-start: var(--base-size-24);\n }\n .Box-wide-marginBlockStart--28 {\n margin-block-start: var(--base-size-28);\n }\n .Box-wide-marginBlockStart--32 {\n margin-block-start: var(--base-size-32);\n }\n .Box-wide-marginBlockStart--36 {\n margin-block-start: var(--base-size-36);\n }\n .Box-wide-marginBlockStart--40 {\n margin-block-start: var(--base-size-40);\n }\n .Box-wide-marginBlockStart--44 {\n margin-block-start: var(--base-size-44);\n }\n .Box-wide-marginBlockStart--48 {\n margin-block-start: var(--base-size-48);\n }\n .Box-wide-marginBlockStart--60 {\n margin-block-start: var(--base-size-60);\n }\n .Box-wide-marginBlockStart--64 {\n margin-block-start: var(--base-size-64);\n }\n .Box-wide-marginBlockStart--80 {\n margin-block-start: var(--base-size-80);\n }\n .Box-wide-marginBlockStart--88 {\n margin-block-start: var(--base-size-88);\n }\n .Box-wide-marginBlockStart--96 {\n margin-block-start: var(--base-size-96);\n }\n .Box-wide-marginBlockStart--112 {\n margin-block-start: var(--base-size-112);\n }\n .Box-wide-marginBlockStart--128 {\n margin-block-start: var(--base-size-128);\n }\n}\n\n/\n 8. Margin Right\n /\n.Box-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginInlineEnd--none {\n margin-inline-end: 0;\n}\n.Box-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n}\n.Box-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n}\n.Box-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n}\n.Box-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n}\n.Box-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n}\n.Box-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n}\n.Box-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n}\n.Box-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n}\n.Box-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n}\n.Box-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n}\n.Box-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n}\n.Box-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n}\n.Box-marginInlineEnd--60 {\n margin-inline-end: var(--base-size-60);\n}\n.Box-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n}\n.Box-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n}\n.Box-marginInlineEnd--88 {\n margin-inline-end: var(--base-size-88);\n}\n.Box-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n}\n.Box-marginInlineEnd--112 {\n margin-inline-end: var(--base-size-112);\n}\n.Box-marginInlineEnd--128 {\n margin-inline-end: var(--base-size-128);\n}\n\n.Box-narrow-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginInlineEnd--none {\n margin-inline-end: 0;\n}\n.Box-narrow-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n}\n.Box-narrow-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n}\n.Box-narrow-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n}\n.Box-narrow-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n}\n.Box-narrow-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n}\n.Box-narrow-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n}\n.Box-narrow-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n}\n.Box-narrow-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n}\n.Box-narrow-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n}\n.Box-narrow-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n}\n.Box-narrow-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n}\n.Box-narrow-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n}\n.Box-narrow-marginInlineEnd--60 {\n margin-inline-end: var(--base-size-60);\n}\n.Box-narrow-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n}\n.Box-narrow-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n}\n.Box-narrow-marginInlineEnd--88 {\n margin-inline-end: var(--base-size-88);\n}\n.Box-narrow-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginInlineEnd--none {\n margin-inline-end: 0;\n }\n .Box-regular-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n }\n .Box-regular-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n }\n .Box-regular-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n }\n .Box-regular-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n }\n .Box-regular-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n }\n .Box-regular-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n }\n .Box-regular-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n }\n .Box-regular-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n }\n .Box-regular-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n }\n .Box-regular-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n }\n .Box-regular-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n }\n .Box-regular-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n }\n .Box-regular-marginInlineEnd--60 {\n margin-inline-end: var(--base-size-60);\n }\n .Box-regular-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n }\n .Box-regular-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n }\n .Box-regular-marginInlineEnd--88 {\n margin-inline-end: var(--base-size-88);\n }\n .Box-regular-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginInlineEnd--condensed {\n margin-inline-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginInlineEnd--normal {\n margin-inline-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginInlineEnd--spacious {\n margin-inline-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginInlineEnd--none {\n margin-inline-end: 0;\n }\n .Box-wide-marginInlineEnd--4 {\n margin-inline-end: var(--base-size-4);\n }\n .Box-wide-marginInlineEnd--8 {\n margin-inline-end: var(--base-size-8);\n }\n .Box-wide-marginInlineEnd--12 {\n margin-inline-end: var(--base-size-12);\n }\n .Box-wide-marginInlineEnd--16 {\n margin-inline-end: var(--base-size-16);\n }\n .Box-wide-marginInlineEnd--20 {\n margin-inline-end: var(--base-size-20);\n }\n .Box-wide-marginInlineEnd--24 {\n margin-inline-end: var(--base-size-24);\n }\n .Box-wide-marginInlineEnd--28 {\n margin-inline-end: var(--base-size-28);\n }\n .Box-wide-marginInlineEnd--32 {\n margin-inline-end: var(--base-size-32);\n }\n .Box-wide-marginInlineEnd--36 {\n margin-inline-end: var(--base-size-36);\n }\n .Box-wide-marginInlineEnd--40 {\n margin-inline-end: var(--base-size-40);\n }\n .Box-wide-marginInlineEnd--44 {\n margin-inline-end: var(--base-size-44);\n }\n .Box-wide-marginInlineEnd--48 {\n margin-inline-end: var(--base-size-48);\n }\n .Box-wide-marginInlineEnd--60 {\n margin-inline-end: var(--base-size-60);\n }\n .Box-wide-marginInlineEnd--64 {\n margin-inline-end: var(--base-size-64);\n }\n .Box-wide-marginInlineEnd--80 {\n margin-inline-end: var(--base-size-80);\n }\n .Box-wide-marginInlineEnd--88 {\n margin-inline-end: var(--base-size-88);\n }\n .Box-wide-marginInlineEnd--96 {\n margin-inline-end: var(--base-size-96);\n }\n}\n/\n 9. Margin bottom\n /\n.Box-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n}\n.Box-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginBlockEnd--none {\n margin-block-end: 0;\n}\n.Box-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n}\n.Box-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n}\n.Box-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n}\n.Box-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n}\n.Box-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n}\n.Box-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n}\n.Box-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n}\n.Box-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n}\n.Box-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n}\n.Box-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n}\n.Box-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n}\n.Box-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n}\n.Box-marginBlockEnd--60 {\n margin-block-end: var(--base-size-60);\n}\n.Box-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n}\n.Box-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n}\n.Box-marginBlockEnd--88 {\n margin-block-end: var(--base-size-88);\n}\n.Box-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n}\n.Box-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n}\n.Box-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n}\n\n.Box-narrow-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginBlockEnd--none {\n margin-block-end: 0;\n}\n.Box-narrow-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n}\n.Box-narrow-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n}\n.Box-narrow-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n}\n.Box-narrow-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n}\n.Box-narrow-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n}\n.Box-narrow-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n}\n.Box-narrow-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n}\n.Box-narrow-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n}\n.Box-narrow-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n}\n.Box-narrow-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n}\n.Box-narrow-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n}\n.Box-narrow-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n}\n.Box-narrow-marginBlockEnd--60 {\n margin-block-end: var(--base-size-60);\n}\n.Box-narrow-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n}\n.Box-narrow-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n}\n.Box-narrow-marginBlockEnd--88 {\n margin-block-end: var(--base-size-88);\n}\n.Box-narrow-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginBlockEnd--none {\n margin-block-end: 0;\n }\n .Box-regular-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n }\n .Box-regular-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n }\n .Box-regular-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n }\n .Box-regular-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n }\n .Box-regular-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n }\n .Box-regular-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n }\n .Box-regular-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n }\n .Box-regular-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n }\n .Box-regular-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n }\n .Box-regular-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n }\n .Box-regular-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n }\n .Box-regular-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n }\n .Box-regular-marginBlockEnd--60 {\n margin-block-end: var(--base-size-60);\n }\n .Box-regular-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n }\n .Box-regular-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n }\n .Box-regular-marginBlockEnd--88 {\n margin-block-end: var(--base-size-88);\n }\n .Box-regular-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n }\n .Box-regular-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n }\n .Box-regular-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginBlockEnd--condensed {\n margin-block-end: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginBlockEnd--normal {\n margin-block-end: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginBlockEnd--spacious {\n margin-block-end: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginBlockEnd--none {\n margin-block-end: 0;\n }\n .Box-wide-marginBlockEnd--4 {\n margin-block-end: var(--base-size-4);\n }\n .Box-wide-marginBlockEnd--8 {\n margin-block-end: var(--base-size-8);\n }\n .Box-wide-marginBlockEnd--12 {\n margin-block-end: var(--base-size-12);\n }\n .Box-wide-marginBlockEnd--16 {\n margin-block-end: var(--base-size-16);\n }\n .Box-wide-marginBlockEnd--20 {\n margin-block-end: var(--base-size-20);\n }\n .Box-wide-marginBlockEnd--24 {\n margin-block-end: var(--base-size-24);\n }\n .Box-wide-marginBlockEnd--28 {\n margin-block-end: var(--base-size-28);\n }\n .Box-wide-marginBlockEnd--32 {\n margin-block-end: var(--base-size-32);\n }\n .Box-wide-marginBlockEnd--36 {\n margin-block-end: var(--base-size-36);\n }\n .Box-wide-marginBlockEnd--40 {\n margin-block-end: var(--base-size-40);\n }\n .Box-wide-marginBlockEnd--44 {\n margin-block-end: var(--base-size-44);\n }\n .Box-wide-marginBlockEnd--48 {\n margin-block-end: var(--base-size-48);\n }\n .Box-wide-marginBlockEnd--60 {\n margin-block-end: var(--base-size-60);\n }\n .Box-wide-marginBlockEnd--64 {\n margin-block-end: var(--base-size-64);\n }\n .Box-wide-marginBlockEnd--80 {\n margin-block-end: var(--base-size-80);\n }\n .Box-wide-marginBlockEnd--88 {\n margin-block-end: var(--base-size-88);\n }\n .Box-wide-marginBlockEnd--96 {\n margin-block-end: var(--base-size-96);\n }\n .Box-wide-marginBlockEnd--112 {\n margin-block-end: var(--base-size-112);\n }\n .Box-wide-marginBlockEnd--128 {\n margin-block-end: var(--base-size-128);\n }\n}\n\n/\n 10. Margin Left\n /\n.Box-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-marginInlineStart--none {\n margin-inline-start: 0;\n}\n.Box-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n}\n.Box-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n}\n.Box-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n}\n.Box-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n}\n.Box-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n}\n.Box-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n}\n.Box-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n}\n.Box-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n}\n.Box-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n}\n.Box-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n}\n.Box-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n}\n.Box-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n}\n.Box-marginInlineStart--60 {\n margin-inline-start: var(--base-size-60);\n}\n.Box-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n}\n.Box-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n}\n.Box-marginInlineStart--88 {\n margin-inline-start: var(--base-size-88);\n}\n.Box-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n}\n.Box-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n}\n.Box-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n}\n\n.Box-narrow-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n}\n.Box-narrow-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n}\n.Box-narrow-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n}\n\n.Box-narrow-marginInlineStart--none {\n margin-inline-start: 0;\n}\n.Box-narrow-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n}\n.Box-narrow-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n}\n.Box-narrow-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n}\n.Box-narrow-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n}\n.Box-narrow-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n}\n.Box-narrow-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n}\n.Box-narrow-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n}\n.Box-narrow-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n}\n.Box-narrow-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n}\n.Box-narrow-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n}\n.Box-narrow-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n}\n.Box-narrow-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n}\n.Box-narrow-marginInlineStart--60 {\n margin-inline-start: var(--base-size-60);\n}\n.Box-narrow-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n}\n.Box-narrow-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n}\n.Box-narrow-marginInlineStart--88 {\n margin-inline-start: var(--base-size-88);\n}\n.Box-narrow-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n}\n.Box-narrow-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n}\n.Box-narrow-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n}\n\n@media screen and (min-width: 48rem) {\n .Box-regular-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-regular-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-regular-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-regular-marginInlineStart--none {\n margin-inline-start: 0;\n }\n .Box-regular-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n }\n .Box-regular-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n }\n .Box-regular-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n }\n .Box-regular-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n }\n .Box-regular-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n }\n .Box-regular-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n }\n .Box-regular-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n }\n .Box-regular-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n }\n .Box-regular-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n }\n .Box-regular-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n }\n .Box-regular-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n }\n .Box-regular-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n }\n .Box-regular-marginInlineStart--60 {\n margin-inline-start: var(--base-size-60);\n }\n .Box-regular-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n }\n .Box-regular-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n }\n .Box-regular-marginInlineStart--88 {\n margin-inline-start: var(--base-size-88);\n }\n .Box-regular-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n }\n .Box-regular-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n }\n .Box-regular-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n }\n}\n\n@media screen and (min-width: 80rem) {\n .Box-wide-marginInlineStart--condensed {\n margin-inline-start: var(--brand-box-spacing-condensed);\n }\n .Box-wide-marginInlineStart--normal {\n margin-inline-start: var(--brand-box-spacing-normal);\n }\n .Box-wide-marginInlineStart--spacious {\n margin-inline-start: var(--brand-box-spacing-spacious);\n }\n\n .Box-wide-marginInlineStart--none {\n margin-inline-start: 0;\n }\n .Box-wide-marginInlineStart--4 {\n margin-inline-start: var(--base-size-4);\n }\n .Box-wide-marginInlineStart--8 {\n margin-inline-start: var(--base-size-8);\n }\n .Box-wide-marginInlineStart--12 {\n margin-inline-start: var(--base-size-12);\n }\n .Box-wide-marginInlineStart--16 {\n margin-inline-start: var(--base-size-16);\n }\n .Box-wide-marginInlineStart--20 {\n margin-inline-start: var(--base-size-20);\n }\n .Box-wide-marginInlineStart--24 {\n margin-inline-start: var(--base-size-24);\n }\n .Box-wide-marginInlineStart--28 {\n margin-inline-start: var(--base-size-28);\n }\n .Box-wide-marginInlineStart--32 {\n margin-inline-start: var(--base-size-32);\n }\n .Box-wide-marginInlineStart--36 {\n margin-inline-start: var(--base-size-36);\n }\n .Box-wide-marginInlineStart--40 {\n margin-inline-start: var(--base-size-40);\n }\n .Box-wide-marginInlineStart--44 {\n margin-inline-start: var(--base-size-44);\n }\n .Box-wide-marginInlineStart--48 {\n margin-inline-start: var(--base-size-48);\n }\n .Box-wide-marginInlineStart--60 {\n margin-inline-start: var(--base-size-60);\n }\n .Box-wide-marginInlineStart--64 {\n margin-inline-start: var(--base-size-64);\n }\n .Box-wide-marginInlineStart--80 {\n margin-inline-start: var(--base-size-80);\n }\n .Box-wide-marginInlineStart--88 {\n margin-inline-start: var(--base-size-88);\n }\n .Box-wide-marginInlineStart--96 {\n margin-inline-start: var(--base-size-96);\n }\n .Box-wide-marginInlineStart--112 {\n margin-inline-start: var(--base-size-112);\n }\n .Box-wide-marginInlineStart--128 {\n margin-inline-start: var(--base-size-128);\n }\n}\n\n/\n 11. Background Color\n /\n.Box-backgroundColor--default {\n background-color: var(--brand-color-canvas-default);\n}\n\n.Box-backgroundColor--inset {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.Box-backgroundColor--subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Box-backgroundColor--overlay {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n/\n* 12. Border Radius\n/\n.Box-borderRadius--small {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Box-borderRadius--medium {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Box-borderRadius--large {\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Box-borderRadius--xlarge {\n border-radius: var(--brand-borderRadius-xlarge);\n}\n\n.Box-borderRadius--full {\n border-radius: var(--brand-borderRadius-full);\n}\n\n/\n* 13. Border Style (must come before width so width can override)\n/\n.Box-borderStyle--solid {\n border-style: solid;\n border-width: 0; / Reset all sides so individual side props work correctly /\n}\n\n.Box-borderStyle--none {\n border-style: none;\n}\n\n/\n* 14. Border Width\n/\n.Box-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n}\n\n.Box-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n}\n\n.Box-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n}\n\n/ Border width: none options /\n.Box-borderWidth--none {\n border-width: 0;\n}\n\n.Box-borderBlockStartWidth--none {\n border-block-start-width: 0;\n}\n\n.Box-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n}\n\n.Box-borderBlockEndWidth--none {\n border-block-end-width: 0;\n}\n\n.Box-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n}\n\n/ Responsive border width: narrow (mobile-first, no media query) /\n.Box-narrow-borderWidth--none {\n border-width: 0;\n}\n.Box-narrow-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderBlockStartWidth--none {\n border-block-start-width: 0;\n}\n.Box-narrow-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n}\n.Box-narrow-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderBlockEndWidth--none {\n border-block-end-width: 0;\n}\n.Box-narrow-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n}\n\n.Box-narrow-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n}\n.Box-narrow-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n}\n.Box-narrow-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n}\n.Box-narrow-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n}\n\n/ Responsive border width: regular (tablet+) /\n@media screen and (min-width: 48rem) {\n .Box-regular-borderWidth--none {\n border-width: 0;\n }\n .Box-regular-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderBlockStartWidth--none {\n border-block-start-width: 0;\n }\n .Box-regular-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n }\n .Box-regular-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderBlockEndWidth--none {\n border-block-end-width: 0;\n }\n .Box-regular-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-regular-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n }\n .Box-regular-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n }\n .Box-regular-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n }\n .Box-regular-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n }\n}\n\n/ Responsive border width: wide (desktop+) /\n@media screen and (min-width: 64rem) {\n .Box-wide-borderWidth--none {\n border-width: 0;\n }\n .Box-wide-borderWidth--thin {\n border-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderWidth--thick {\n border-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderWidth--thicker {\n border-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderBlockStartWidth--none {\n border-block-start-width: 0;\n }\n .Box-wide-borderBlockStartWidth--thin {\n border-block-start-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderBlockStartWidth--thick {\n border-block-start-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderBlockStartWidth--thicker {\n border-block-start-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderInlineEndWidth--none {\n border-inline-end-width: 0;\n }\n .Box-wide-borderInlineEndWidth--thin {\n border-inline-end-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderInlineEndWidth--thick {\n border-inline-end-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderInlineEndWidth--thicker {\n border-inline-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderBlockEndWidth--none {\n border-block-end-width: 0;\n }\n .Box-wide-borderBlockEndWidth--thin {\n border-block-end-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderBlockEndWidth--thick {\n border-block-end-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderBlockEndWidth--thicker {\n border-block-end-width: var(--brand-borderWidth-thicker);\n }\n\n .Box-wide-borderInlineStartWidth--none {\n border-inline-start-width: 0;\n }\n .Box-wide-borderInlineStartWidth--thin {\n border-inline-start-width: var(--brand-borderWidth-thin);\n }\n .Box-wide-borderInlineStartWidth--thick {\n border-inline-start-width: var(--brand-borderWidth-thick);\n }\n .Box-wide-borderInlineStartWidth--thicker {\n border-inline-start-width: var(--brand-borderWidth-thicker);\n }\n}\n\n/\n* 14. Border Color\n*/\n.Box-borderColor--default {\n border-color: var(--brand-color-border-default);\n}\n\n.Box-borderColor--muted {\n border-color: var(--brand-color-border-muted);\n}\n\n.Box-borderColor--subtle {\n border-color: var(--brand-color-border-subtle);\n}\n"],"mappings":""}

package/esm/Card/{Card.module-OxFQdnTA.css → Card.module-DZZ8DN76.css} RENAMED Viewed

	@@ -1 +1 @@
1	- .Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);transition:transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);padding:var(--base-size-32);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{text-align:center;padding:var(--base-size-64) var(--base-size-40)}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{padding:var(--base-size-64) var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{padding:var(--base-size-64) var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__Card-module__Card__description___6RhVF code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__Card-module__Card__link___LyRm6:has(code){line-height:1.4lh}.Primer_Brand__Card-module__Card__description___6RhVF.Primer_Brand__Card-module__Card__description___6RhVF:has(code){line-height:1.25lh}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:scale(1.025)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-32)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:fit-content;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:0;padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-full);transition:border-color .3s ease-out,background-color .3s ease-out,column-gap .3s ease-out,padding-inline .3s ease-out,-moz-column-gap .3s ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;flex-shrink:0;justify-content:flex-start;column-gap:0;margin-block-start:var(--base-size-20);padding-inline:0;overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 {cursor:inherit}.Primer_Brand__Card-module__Card--skew___k2nMy:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}.Primer_Brand__Card-module__Card--skew___k2nMy:hover .Primer_Brand__Card-module__Card__torch___hdUqp{opacity:.85}.Primer_Brand__Card-module__Card__skew-bounding___g108S{border-radius:var(--brand-borderRadius-medium);z-index:1;background-color:var(--brand-Card-background-default);height:100%;position:relative;overflow:hidden}.Primer_Brand__Card-module__Card__torch___hdUqp{background-color:var(--brand-color-accent-primary);filter:blur(180px);opacity:0;mix-blend-mode:soft-light;will-change:transform;pointer-events:none;z-index:-1;border-radius:300px;width:650px;height:650px;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:0}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:none}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
1	+ .Primer_Brand__Card-module__Card___txAQX{--Card-grid-template-rows:auto auto auto auto auto auto 1fr auto;color:var(--brand-color-text-default);transition:transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);padding:var(--base-size-32);grid-template:"image image""leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description"1fr"action action"/1fr 1fr;grid-template-rows:var(--Card-grid-template-rows);border-radius:var(--brand-borderRadius-medium);flex:auto;height:100%;-webkit-text-decoration:none;text-decoration:none;display:grid;position:relative}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{text-align:center;padding:var(--base-size-64) var(--base-size-40)}@media screen and (width>=64rem){.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{padding:var(--base-size-64) var(--base-size-80)}}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card___txAQX{grid-template-columns:1fr;grid-template-areas:"image""leadingVisual""icon""tokens""label""heading""description""action";justify-items:center}.Primer_Brand__Card-module__Card--backgroundColor-default___1JGan{background-color:var(--brand-Card-background-default)}.Primer_Brand__Card-module__Card--backgroundColor-subtle___0bVGO{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Card-module__Card--backgroundColor-none___GVX0n{background-color:#0000}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"image image""leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"image""leadingVisual""icon""label""heading""description""tokens""action"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{--Card-grid-template-rows:auto auto auto auto auto 1fr auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""tokens tokens""label label""heading heading""description description""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_{grid-template-areas:"leadingVisual""icon""tokens""label""heading""description""action""image"}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{--Card-grid-template-rows:auto auto auto auto 1fr auto auto auto;grid-template-areas:"leadingVisual leadingVisual""icon icon""label label""heading heading""description description""tokens tokens""action action""image image"}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy{grid-template-areas:"leadingVisual""icon""label""heading""description""tokens""action""image"}.Primer_Brand__Card-module__Card--hasLeadingVisual___M8XW4{padding:var(--base-size-64) var(--base-size-40)}.Primer_Brand__Card-module__Card--imagePos-block-end___fG_r_ .Primer_Brand__Card-module__Card__image___3J5wL{margin-bottom:0;margin-top:var(--base-size-28)}.Primer_Brand__Card-module__Card--maxWidth___vGoIk{max-width:var(--brand-Card-maxWidth)}.Primer_Brand__Card-module__Card--fullWidth___nh9Zq{max-width:none;max-width:initial}.Primer_Brand__Card-module__Card--variant-minimal___V3m21,.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--variant-minimal___V3m21{padding:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH{--Card-arrowAction-endInset:var(--base-size-40)}.Primer_Brand__Card-module__Card___txAQX:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Card-module__Card__link___LyRm6{color:currentColor;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__Card-module__Card__link___LyRm6 code,.Primer_Brand__Card-module__Card__description___6RhVF code{font-size:inherit;font-family:var(--brand-fontStack-monospace);background-color:var(--brand-color-canvas-subtle);padding:0 var(--base-size-4) var(--base-size-2);margin-inline:var(--base-size-2);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-small);box-shadow:var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)}.Primer_Brand__Card-module__Card__description___6RhVF code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__Card-module__Card__link___LyRm6:has(code){line-height:1.4lh}.Primer_Brand__Card-module__Card__description___6RhVF.Primer_Brand__Card-module__Card__description___6RhVF:has(code){line-height:1.25lh}.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc:hover .Primer_Brand__Card-module__Card__link___LyRm6{-webkit-text-decoration:underline!important;text-decoration:underline!important}.Primer_Brand__Card-module__Card__link___LyRm6:focus{outline:none}.Primer_Brand__Card-module__Card__link___LyRm6:before{content:"";position:absolute;inset:0}.Primer_Brand__Card-module__Card--border___7rvcG{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY{height:100%}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21){border-radius:var(--brand-borderRadius-small)}.Primer_Brand__Card-module__Card__outer___FFzJY:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);border-radius:var(--brand-borderRadius-medium)}.Primer_Brand__Card-module__Card__outer___FFzJY:has(.Primer_Brand__Card-module__Card--variant-minimal___V3m21):focus-within{outline-offset:var(--base-size-12)}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:scale(1.025)}.Primer_Brand__Card-module__Card__image___3J5wL{border-radius:var(--brand-borderRadius-medium);grid-area:image;margin-block-end:var(--base-size-28);overflow:hidden}.Primer_Brand__Card-module__Card__image___3J5wL img,.Primer_Brand__Card-module__Card__image___3J5wL picture,.Primer_Brand__Card-module__Card__image___3J5wL span{display:block}.Primer_Brand__Card-module__Card__leadingVisual___l_R3_{grid-area:leadingVisual;align-items:center;margin-block-end:var(--base-size-36);display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__leadingVisual___l_R3_{justify-content:center}.Primer_Brand__Card-module__Card__leadingVisualItem___ICuuV{max-width:100%;height:var(--base-size-40);width:auto;display:block}.Primer_Brand__Card-module__Card__icon___gPD1k{margin-bottom:var(--base-size-24);grid-area:icon}.Primer_Brand__Card-module__Card__tokens___9L_4a{gap:var(--base-size-8);margin-bottom:var(--base-size-20);flex-wrap:wrap;grid-area:tokens;display:flex}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__tokens___9L_4a{justify-content:center}.Primer_Brand__Card-module__Card__tokens--position-block-end___TL4R0{margin-block-start:var(--base-size-20);margin-block-end:0}.Primer_Brand__Card-module__Card__label___q_cqg{grid-area:label;inline-size:fit-content;max-inline-size:100%;margin-block-end:var(--base-size-20)}.Primer_Brand__Card-module__Card__heading___vdQlj{grid-area:heading;margin-block-end:var(--base-size-12)}.Primer_Brand__Card-module__Card__description___6RhVF{grid-area:description;margin-block-end:var(--base-size-32)}.Primer_Brand__Card-module__Card__action___NKFQ0{pointer-events:none;grid-area:action;align-items:center;max-inline-size:100%;margin-block-start:auto;display:inline-flex}.Primer_Brand__Card-module__Card__actionIcon___KF4ar{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0{inline-size:100%;min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__action___NKFQ0>span:first-child{min-inline-size:0}.Primer_Brand__Card-module__Card___txAQX:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-overflow:clip;white-space:normal;word-wrap:anywhere;overflow:visible}.Primer_Brand__Card-module__Card--align-center___zuZI_:not(.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH) .Primer_Brand__Card-module__Card__actionLabel____icG0{text-align:center}.Primer_Brand__Card-module__Card__actionLabelClip___kEth0{--actionLabelClip-duration:.4s;opacity:0;min-inline-size:0;max-inline-size:0;transform:translateX(calc(var(--base-size-12) * -1));transition:max-inline-size .4s var(--brand-Card-animation-easing), opacity .4s ease-out, transform .4s ease-out, margin-inline .4s ease-out, padding-inline .4s ease-out;transition:max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing), opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out, margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;background-color:#0000;flex:auto;align-self:stretch;align-items:center;display:inline-flex;overflow:hidden}.Primer_Brand__Card-module__Card--tokensPosition-block-end___E6Buy .Primer_Brand__Card-module__Card__action___NKFQ0{margin-block-start:var(--base-size-20)}.Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{--actionArrow-duration:.3s;min-height:var(--base-size-40);width:auto;min-inline-size:0;max-inline-size:calc(100% - var(--Card-arrowAction-endInset));-moz-column-gap:0;padding-block:var(--base-size-4);border:var(--brand-borderWidth-thin) solid transparent;border-radius:var(--brand-borderRadius-full);transition:border-color .3s ease-out,background-color .3s ease-out,column-gap .3s ease-out,padding-inline .3s ease-out,-moz-column-gap .3s ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;transition:border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out, column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;background-color:#0000;flex-shrink:0;justify-content:flex-start;column-gap:0;margin-block-start:var(--base-size-20);padding-inline:0;overflow:hidden}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1{width:var(--base-size-32);min-width:var(--base-size-32);height:var(--base-size-32);min-height:var(--base-size-32);border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-full);background-color:var(--brand-color-canvas-default)}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card__action___NKFQ0{justify-content:center}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 span{color:var(--brand-Link-color-accent)}.Primer_Brand__Card-module__Card__action___NKFQ0,.Primer_Brand__Card-module__Card__action___NKFQ0 {cursor:inherit}.Primer_Brand__Card-module__Card--skew___k2nMy:focus-within{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus)}.Primer_Brand__Card-module__Card--skew___k2nMy:hover .Primer_Brand__Card-module__Card__torch___hdUqp{opacity:.85}.Primer_Brand__Card-module__Card__skew-bounding___g108S{border-radius:var(--brand-borderRadius-medium);z-index:1;background-color:var(--brand-Card-background-default);height:100%;position:relative;overflow:hidden}.Primer_Brand__Card-module__Card__torch___hdUqp{background-color:var(--brand-color-accent-primary);filter:blur(180px);opacity:0;mix-blend-mode:soft-light;will-change:transform;pointer-events:none;z-index:-1;border-radius:300px;width:650px;height:650px;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);position:absolute;bottom:0;right:0}.Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card--expandableArrow____CfmY{--ExpandableArrow-duration:var(--brand-Card-animation-duration);--ExpandableArrow-easing:var(--brand-Card-animation-easing)}.Primer_Brand__Card-module__Card__actionIcon--arrowOnly___vCck1 .Primer_Brand__Card-module__Card--expandableArrow____CfmY{margin-inline-start:0}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__description___6RhVF{margin-bottom:var(--base-size-12)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:not(.Primer_Brand__Card-module__Card--disableAnimation___wZ9Jc):hover{transform:none}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:start;min-inline-size:0}.Primer_Brand__Card-module__Card--align-center___zuZI_ .Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH .Primer_Brand__Card-module__Card__action___NKFQ0{justify-self:center}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__action--arrowOnly___19e3M{-moz-column-gap:var(--base-size-8);column-gap:var(--base-size-8);border-color:var(--brand-color-border-default);background-color:var(--brand-Card-background-overlay);padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4)}.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:focus-within .Primer_Brand__Card-module__Card__actionLabelClip___kEth0,.Primer_Brand__Card-module__Card--ctaVariant-arrow___vXAWH:hover .Primer_Brand__Card-module__Card__actionLabelClip___kEth0{opacity:1;max-inline-size:100%;margin-inline-start:calc(var(--base-size-12) -1);margin-inline-end:0;padding-inline-start:var(--base-size-12);padding-inline-end:var(--base-size-4);transform:translate(0)}.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY,.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY{transform:translateX(var(--base-size-2))}.Primer_Brand__Card-module__Card___txAQX:hover .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2),.Primer_Brand__Card-module__Card___txAQX:focus-within .Primer_Brand__Card-module__Card--expandableArrow____CfmY path:nth-of-type(2){stroke-dashoffset:20px}@media (prefers-reduced-motion:reduce){.Primer_Brand__Card-module__Card___txAQX,.Primer_Brand__Card-module__Card___txAQX:before,.Primer_Brand__Card-module__Card___txAQX:after,.Primer_Brand__Card-module__Card___txAQX *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Card/Card.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Card.module-OxFQdnTA.css';var e = {
+import './Card.module-DZZ8DN76.css';var e = {
 	Card: "Primer_Brand__Card-module__Card___txAQX",
 	"Card--align-center": "Primer_Brand__Card-module__Card--align-center___zuZI_",
 	"Card--backgroundColor-default": "Primer_Brand__Card-module__Card--backgroundColor-default___1JGan",

package/esm/Card/Card.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. /\n --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n text-decoration: none;\n color: var(--brand-color-text-default);\n\n transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n padding: var(--base-size-32);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action';\n flex: auto;\n grid-template-rows: var(--Card-grid-template-rows);\n position: relative;\n height: 100%;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card--align-center .Card {\n text-align: center;\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n .Card--align-center .Card {\n padding: var(--base-size-64) var(--base-size-80);\n }\n}\n\n.Card--align-center .Card {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action';\n justify-items: center;\n}\n\n.Card--backgroundColor-default {\n background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action';\n}\n\n/* Block end image position option /\n.Card--imagePos-block-end {\n / Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action'\n 'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. /\n --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action'\n 'image';\n}\n\n.Card--hasLeadingVisual {\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n margin-bottom: 0;\n margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n max-width: unset;\n}\n\n.Card--variant-minimal {\n padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n text-decoration: none;\n}\n\n.Card__link {\n color: currentColor;\n text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace);\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\n margin-inline: var(--base-size-2);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-small);\n box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n line-height: calc(1lh 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title /\n.Card__link:focus {\n outline: none;\n}\n\n.Card__link::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.Card--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n outline-offset: var(\n --base-size-12\n ); / This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` /\n}\n\n.Card:not(.Card--disableAnimation):hover {\n transform: scale3d(1.025, 1.025, 1);\n}\n\n.Card__image {\n margin-block-end: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n display: block;\n}\n\n.Card__leadingVisual {\n margin-block-end: var(--base-size-36);\n display: flex;\n align-items: center;\n grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n justify-content: center;\n}\n\n.Card__leadingVisualItem {\n display: block;\n max-width: 100%;\n height: var(--base-size-40);\n width: auto;\n}\n\n.Card__icon {\n margin-bottom: var(--base-size-24);\n grid-area: icon;\n}\n\n.Card__tokens {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-8);\n grid-area: tokens;\n margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n margin-block-start: var(--base-size-20);\n margin-block-end: 0;\n}\n\n.Card__label {\n margin-block-end: var(--base-size-20);\n grid-area: label;\n inline-size: fit-content;\n max-inline-size: 100%;\n}\n\n.Card__heading {\n margin-block-end: var(--base-size-20);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-32);\n grid-area: description;\n}\n\n.Card__action {\n grid-area: action;\n margin-block-start: auto;\n display: inline-flex;\n align-items: center;\n max-inline-size: 100%;\n pointer-events: none;\n}\n\n.Card__actionIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.Card__actionLabel {\n display: block;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n inline-size: 100%;\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n text-align: center;\n}\n\n.Card__actionLabelClip {\n --actionLabelClip-duration: 400ms;\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n align-self: stretch;\n min-inline-size: 0;\n overflow: hidden;\n max-inline-size: 0;\n background-color: transparent;\n opacity: 0;\n transform: translateX(calc(var(--base-size-12) -1));\n transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n --actionArrow-duration: 300ms;\n\n margin-block-start: var(--base-size-20);\n min-height: var(--base-size-40);\n width: fit-content;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: 0;\n padding-block: var(--base-size-4);\n padding-inline: 0;\n border: var(--brand-borderWidth-thin) solid transparent;\n border-radius: var(--brand-borderRadius-full);\n background-color: transparent;\n flex-shrink: 0;\n overflow: hidden;\n transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n}\n\n.Card__actionIcon--arrowOnly {\n width: var(--base-size-32);\n min-width: var(--base-size-32);\n height: var(--base-size-32);\n min-height: var(--base-size-32);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n cursor: inherit;\n}\n\n.Card--skew:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n opacity: 0.85;\n}\n\n.Card__skew-bounding {\n border-radius: var(--brand-borderRadius-medium);\n position: relative;\n overflow: hidden;\n z-index: 1;\n height: 100%;\n background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n width: 650px;\n height: 650px;\n background-color: var(--brand-color-accent-primary);\n filter: blur(180px);\n border-radius: 300px;\n opacity: 0;\n transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n mix-blend-mode: soft-light;\n will-change: transform;\n pointer-events: none;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -1;\n}\n\n.Card--expandableArrow {\n margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {\n transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n column-gap: var(--base-size-8);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border-color: var(--brand-color-border-default);\n background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n max-inline-size: 100%;\n opacity: 1;\n transform: translateX(0);\n margin-inline-start: calc(var(--base-size-12) * -1);\n margin-inline-end: 0;\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n stroke-dashoffset: 20;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Card,\n .Card::before,\n .Card::after,\n .Card {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Card.module.js","names":[],"sources":["../../src/Card/Card.module.css"],"sourcesContent":[".Card {\n /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. /\n --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;\n\n text-decoration: none;\n color: var(--brand-color-text-default);\n\n transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);\n padding: var(--base-size-32);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action';\n flex: auto;\n grid-template-rows: var(--Card-grid-template-rows);\n position: relative;\n height: 100%;\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card--align-center .Card {\n text-align: center;\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n@media screen and (min-width: 64rem) {\n .Card--align-center .Card {\n padding: var(--base-size-64) var(--base-size-80);\n }\n}\n\n.Card--align-center .Card {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action';\n justify-items: center;\n}\n\n.Card--backgroundColor-default {\n background-color: var(--brand-Card-background-default);\n}\n\n.Card--backgroundColor-subtle {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Card--backgroundColor-none {\n background-color: transparent;\n}\n\n.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'image image'\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action';\n}\n\n.Card--align-center .Card--tokensPosition-block-end {\n grid-template-areas:\n 'image'\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action';\n}\n\n/* Block end image position option /\n.Card--imagePos-block-end {\n / Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. /\n --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'tokens tokens'\n 'label label'\n 'heading heading'\n 'description description'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'tokens'\n 'label'\n 'heading'\n 'description'\n 'action'\n 'image';\n}\n\n.Card--imagePos-block-end.Card--tokensPosition-block-end {\n / Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. /\n --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;\n\n grid-template-areas:\n 'leadingVisual leadingVisual'\n 'icon icon'\n 'label label'\n 'heading heading'\n 'description description'\n 'tokens tokens'\n 'action action'\n 'image image';\n}\n\n.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {\n grid-template-areas:\n 'leadingVisual'\n 'icon'\n 'label'\n 'heading'\n 'description'\n 'tokens'\n 'action'\n 'image';\n}\n\n.Card--hasLeadingVisual {\n padding: var(--base-size-64) var(--base-size-40);\n}\n\n.Card--imagePos-block-end .Card__image {\n margin-bottom: 0;\n margin-top: var(--base-size-28);\n}\n\n.Card--maxWidth {\n max-width: var(--brand-Card-maxWidth);\n}\n\n.Card--fullWidth {\n max-width: unset;\n}\n\n.Card--variant-minimal {\n padding: 0;\n}\n\n.Card--align-center .Card--variant-minimal {\n padding: 0;\n}\n\n.Card--ctaVariant-arrow {\n --Card-arrowAction-endInset: var(--base-size-40);\n}\n\n.Card:hover {\n text-decoration: none;\n}\n\n.Card__link {\n color: currentColor;\n text-decoration: none !important;\n}\n\n.Card__link code,\n.Card__description code {\n font-size: inherit;\n font-family: var(--brand-fontStack-monospace);\n background-color: var(--brand-color-canvas-subtle);\n padding: 0 var(--base-size-4) var(--base-size-2);\n margin-inline: var(--base-size-2);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-small);\n box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.Card__description code {\n padding: var(--base-size-2) var(--base-size-4) 0;\n}\n.Card__link:has(code) {\n line-height: calc(1lh 1.4);\n}\n\n.Card__description.Card__description:has(code) {\n line-height: calc(1lh * 1.25);\n}\n\n.Card--disableAnimation:hover .Card__link {\n text-decoration: underline !important;\n}\n\n/* The focus outline will appear around the entire card, not just the title /\n.Card__link:focus {\n outline: none;\n}\n\n.Card__link::before {\n content: '';\n position: absolute;\n inset: 0;\n}\n\n.Card--border {\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer {\n height: 100%;\n}\n\n.Card__outer:has(.Card--variant-minimal) {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.Card__outer:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.Card__outer:has(.Card--variant-minimal):focus-within {\n outline-offset: var(\n --base-size-12\n ); / This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` /\n}\n\n.Card:not(.Card--disableAnimation):hover {\n transform: scale3d(1.025, 1.025, 1);\n}\n\n.Card__image {\n margin-block-end: var(--base-size-28);\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n grid-area: image;\n}\n\n.Card__image img,\n.Card__image picture,\n.Card__image span {\n display: block;\n}\n\n.Card__leadingVisual {\n margin-block-end: var(--base-size-36);\n display: flex;\n align-items: center;\n grid-area: leadingVisual;\n}\n\n.Card--align-center .Card__leadingVisual {\n justify-content: center;\n}\n\n.Card__leadingVisualItem {\n display: block;\n max-width: 100%;\n height: var(--base-size-40);\n width: auto;\n}\n\n.Card__icon {\n margin-bottom: var(--base-size-24);\n grid-area: icon;\n}\n\n.Card__tokens {\n display: flex;\n flex-wrap: wrap;\n gap: var(--base-size-8);\n grid-area: tokens;\n margin-bottom: var(--base-size-20);\n}\n\n.Card--align-center .Card__tokens {\n justify-content: center;\n}\n\n.Card__tokens--position-block-end {\n margin-block-start: var(--base-size-20);\n margin-block-end: 0;\n}\n\n.Card__label {\n margin-block-end: var(--base-size-20);\n grid-area: label;\n inline-size: fit-content;\n max-inline-size: 100%;\n}\n\n.Card__heading {\n margin-block-end: var(--base-size-12);\n grid-area: heading;\n}\n\n.Card__description {\n margin-block-end: var(--base-size-32);\n grid-area: description;\n}\n\n.Card__action {\n grid-area: action;\n margin-block-start: auto;\n display: inline-flex;\n align-items: center;\n max-inline-size: 100%;\n pointer-events: none;\n}\n\n.Card__actionIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.Card__actionLabel {\n display: block;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action {\n inline-size: 100%;\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {\n min-inline-size: 0;\n}\n\n.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {\n text-align: center;\n}\n\n.Card__actionLabelClip {\n --actionLabelClip-duration: 400ms;\n display: inline-flex;\n flex: 1 1 auto;\n align-items: center;\n align-self: stretch;\n min-inline-size: 0;\n overflow: hidden;\n max-inline-size: 0;\n background-color: transparent;\n opacity: 0;\n transform: translateX(calc(var(--base-size-12) -1));\n transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),\n opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,\n margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;\n}\n\n.Card--tokensPosition-block-end .Card__action {\n margin-block-start: var(--base-size-20);\n}\n\n.Card__action--arrowOnly {\n --actionArrow-duration: 300ms;\n\n margin-block-start: var(--base-size-20);\n min-height: var(--base-size-40);\n width: auto;\n min-inline-size: 0;\n max-inline-size: calc(100% - var(--Card-arrowAction-endInset));\n justify-content: flex-start;\n column-gap: 0;\n padding-block: var(--base-size-4);\n padding-inline: 0;\n border: var(--brand-borderWidth-thin) solid transparent;\n border-radius: var(--brand-borderRadius-full);\n background-color: transparent;\n flex-shrink: 0;\n overflow: hidden;\n transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,\n column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;\n}\n\n.Card__actionIcon--arrowOnly {\n width: var(--base-size-32);\n min-width: var(--base-size-32);\n height: var(--base-size-32);\n min-height: var(--base-size-32);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-full);\n background-color: var(--brand-color-canvas-default);\n}\n\n.Card--align-center .Card__action {\n justify-content: center;\n}\n\n.Card__action,\n.Card__action span {\n color: var(--brand-Link-color-accent);\n}\n\n.Card__action,\n.Card__action * {\n cursor: inherit;\n}\n\n.Card--skew:focus-within {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.Card--skew:hover .Card__torch {\n opacity: 0.85;\n}\n\n.Card__skew-bounding {\n border-radius: var(--brand-borderRadius-medium);\n position: relative;\n overflow: hidden;\n z-index: 1;\n height: 100%;\n background-color: var(--brand-Card-background-default);\n}\n\n.Card__torch {\n width: 650px;\n height: 650px;\n background-color: var(--brand-color-accent-primary);\n filter: blur(180px);\n border-radius: 300px;\n opacity: 0;\n transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n mix-blend-mode: soft-light;\n will-change: transform;\n pointer-events: none;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: -1;\n}\n\n.Card--expandableArrow {\n margin-inline-start: var(--base-size-4);\n}\n\n.Card--ctaVariant-arrow .Card--expandableArrow {\n --ExpandableArrow-duration: var(--brand-Card-animation-duration);\n --ExpandableArrow-easing: var(--brand-Card-animation-easing);\n}\n\n.Card__actionIcon--arrowOnly .Card--expandableArrow {\n margin-inline-start: 0;\n}\n\n.Card--ctaVariant-arrow .Card__description {\n margin-bottom: var(--base-size-12);\n}\n\n.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {\n transform: none;\n}\n\n.Card--ctaVariant-arrow .Card__action {\n min-inline-size: 0;\n justify-self: start;\n}\n\n.Card--align-center .Card--ctaVariant-arrow .Card__action {\n justify-self: center;\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {\n column-gap: var(--base-size-8);\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n border-color: var(--brand-color-border-default);\n background-color: var(--brand-Card-background-overlay);\n}\n\n.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {\n max-inline-size: 100%;\n opacity: 1;\n transform: translateX(0);\n margin-inline-start: calc(var(--base-size-12) * -1);\n margin-inline-end: 0;\n padding-inline-start: var(--base-size-12);\n padding-inline-end: var(--base-size-4);\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow {\n transform: translateX(var(--base-size-2));\n}\n\n.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {\n stroke-dashoffset: 20;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .Card,\n .Card::before,\n .Card::after,\n .Card {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/FAQ/FAQ.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
     Item: React.ForwardRefExoticComponent<React.DetailsHTMLAttributes<HTMLDetailsElement> & {
         children: React.ReactElement<import("..").AccordionHeadingProps | import("..").AccordionContentProps>[];
         variant?: "default" | "emphasis";
+        disableAnimation?: boolean;
         handleOpen?: (isOpen: boolean) => void;
     } & React.RefAttributes<HTMLDetailsElement>>;
     Question: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
@@ -39,7 +40,7 @@ export declare const FAQ: React.ForwardRefExoticComponent<Omit<FAQRootProps, "re
         toggleColor?: typeof import("..").AccordionToggleColors[number];
         weight?: HeadingProps["weight"];
     } & React.RefAttributes<HTMLHeadingElement>>;
-    Answer: ({ className, ...rest }: import("..").AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Answer: ({ children, className, ...rest }: import("..").AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};
 //# sourceMappingURL=FAQ.d.ts.map

package/esm/FAQ/FAQ.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../src/FAQ/FAQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG1D,OAAO,EAA2E,YAAY,EAAC,MAAM,IAAI,CAAA;AACzG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,0FAA0F,CAAA;AACjG,OAAO,uGAAuG,CAAA;AAC9G,OAAO,yFAAyF,CAAA;AAOhG,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACjC,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAgEnC,KAAK,eAAe,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;CACxB,GAAG,YAAY,CAAA;AAmBhB,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAEhB,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,EAAS,EACT,IAAuB,EACvB,IAAkB,EAClB,MAAiB,EACjB,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAapB;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG~~;;;;;;;;;;;;;;;~~CAMd,CAAA"}
1	+ {"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../src/FAQ/FAQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAG1D,OAAO,EAA2E,YAAY,EAAC,MAAM,IAAI,CAAA;AACzG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAGnD;;GAEG;AACH,OAAO,0FAA0F,CAAA;AACjG,OAAO,uGAAuG,CAAA;AAC9G,OAAO,yFAAyF,CAAA;AAOhG,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACjC,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAgEnC,KAAK,eAAe,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;CACxB,GAAG,YAAY,CAAA;AAmBhB,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAEhB,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,EAAS,EACT,IAAuB,EACvB,IAAkB,EAClB,MAAiB,EACjB,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAapB;AAED;;;GAGG;AACH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;CAMd,CAAA"}