/**
 * Failed to minify the file using clean-css v5.3.3. Serving the original version.
 * Original file: /npm/shed-css@1.2.1/lib/index.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
:root {
	--augmented-fourth : 1.414;
	--double-octave    : 4;
	--fifth            : 1.5;
	--fourth           : 1.333;
	--golden           : 1.618;
	--major-eleventh   : 2.667;
	--major-second     : 1.125;
	--major-seventh    : 1.875;
	--major-sixth      : 1.667;
	--major-tenth      : 2.5;
	--major-third      : 1.25;
	--major-twelfth    : 3;
	--minor-second     : 1.067;
	--minor-seventh    : 1.778;
	--minor-sixth      : 1.6;
	--minor-third      : 1.2;
	--octave           : 2;
	--phi              : 1.618;

	--ms0   : var(--ms-base);
	--ms1   : calc(var(--ms-ratio) * var(--ms0));
	--ms2   : calc(var(--ms-ratio) * var(--ms1));
	--ms3   : calc(var(--ms-ratio) * var(--ms2));
	--ms4   : calc(var(--ms-ratio) * var(--ms3));
	--ms5   : calc(var(--ms-ratio) * var(--ms4));
	--ms6   : calc(var(--ms-ratio) * var(--ms5));
	--ms7   : calc(var(--ms-ratio) * var(--ms6));
	--ms8   : calc(var(--ms-ratio) * var(--ms7));
	--ms9   : calc(var(--ms-ratio) * var(--ms8));
	--ms10  : calc(var(--ms-ratio) * var(--ms9));
	--ms11  : calc(var(--ms-ratio) * var(--ms10));
	--ms12  : calc(var(--ms-ratio) * var(--ms11));
	--ms13  : calc(var(--ms-ratio) * var(--ms12));
	--ms14  : calc(var(--ms-ratio) * var(--ms13));
	--ms15  : calc(var(--ms-ratio) * var(--ms14));
	--ms16  : calc(var(--ms-ratio) * var(--ms15));
	--ms-1  : calc(var(--ms0) / var(--ms-ratio));
	--ms-2  : calc(var(--ms-1) / var(--ms-ratio));
	--ms-3  : calc(var(--ms-2) / var(--ms-ratio));
	--ms-4  : calc(var(--ms-3) / var(--ms-ratio));
	--ms-5  : calc(var(--ms-4) / var(--ms-ratio));
	--ms-6  : calc(var(--ms-5) / var(--ms-ratio));
	--ms-7  : calc(var(--ms-6) / var(--ms-ratio));
	--ms-8  : calc(var(--ms-7) / var(--ms-ratio));
	--ms-9  : calc(var(--ms-8) / var(--ms-ratio));
	--ms-10 : calc(var(--ms-9) / var(--ms-ratio));

	--ms-ratio : var(--golden);
	--ms-base  : 1rem;
}
.f\:\.1,
			.f-z\:\.1 {
	font-size : var(--z-dot1);
}
.f\:\.2,
			.f-z\:\.2 {
	font-size : var(--z-dot2);
}
.f\:\.3,
			.f-z\:\.3 {
	font-size : var(--z-dot3);
}
.f\:\.4,
			.f-z\:\.4 {
	font-size : var(--z-dot4);
}
.f\:\.5,
			.f-z\:\.5 {
	font-size : var(--z-dot5);
}
.f\:\.6,
			.f-z\:\.6 {
	font-size : var(--z-dot6);
}
.f\:\.7,
			.f-z\:\.7 {
	font-size : var(--z-dot7);
}
.f\:\.8,
			.f-z\:\.8 {
	font-size : var(--z-dot8);
}
.f\:\.9,
			.f-z\:\.9 {
	font-size : var(--z-dot9);
}
.f\:0,
			.f-z\:0 {
	font-size : var(--z0);
}
.f\:1,
			.f-z\:1 {
	font-size : var(--z1);
}
.f\:2,
			.f-z\:2 {
	font-size : var(--z2);
}
.f\:3,
			.f-z\:3 {
	font-size : var(--z3);
}
.f\:4,
			.f-z\:4 {
	font-size : var(--z4);
}
.f\:5,
			.f-z\:5 {
	font-size : var(--z5);
}
.f\:6,
			.f-z\:6 {
	font-size : var(--z6);
}
.f\:7,
			.f-z\:7 {
	font-size : var(--z7);
}
.f\:8,
			.f-z\:8 {
	font-size : var(--z8);
}
.f\:9,
			.f-z\:9 {
	font-size : var(--z9);
}
.f\:10,
			.f-z\:10 {
	font-size : var(--z10);
}
@media (--mq-xxs) {
	.f\:\.1\@xxs,
				.f-z\:\.1\@xxs {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@xxs,
				.f-z\:\.2\@xxs {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@xxs,
				.f-z\:\.3\@xxs {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@xxs,
				.f-z\:\.4\@xxs {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@xxs,
				.f-z\:\.5\@xxs {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@xxs,
				.f-z\:\.6\@xxs {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@xxs,
				.f-z\:\.7\@xxs {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@xxs,
				.f-z\:\.8\@xxs {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@xxs,
				.f-z\:\.9\@xxs {
		font-size : var(--z-dot9);
	}
	.f\:0\@xxs,
				.f-z\:0\@xxs {
		font-size : var(--z0);
	}
	.f\:1\@xxs,
				.f-z\:1\@xxs {
		font-size : var(--z1);
	}
	.f\:2\@xxs,
				.f-z\:2\@xxs {
		font-size : var(--z2);
	}
	.f\:3\@xxs,
				.f-z\:3\@xxs {
		font-size : var(--z3);
	}
	.f\:4\@xxs,
				.f-z\:4\@xxs {
		font-size : var(--z4);
	}
	.f\:5\@xxs,
				.f-z\:5\@xxs {
		font-size : var(--z5);
	}
	.f\:6\@xxs,
				.f-z\:6\@xxs {
		font-size : var(--z6);
	}
	.f\:7\@xxs,
				.f-z\:7\@xxs {
		font-size : var(--z7);
	}
	.f\:8\@xxs,
				.f-z\:8\@xxs {
		font-size : var(--z8);
	}
	.f\:9\@xxs,
				.f-z\:9\@xxs {
		font-size : var(--z9);
	}
	.f\:10\@xxs,
				.f-z\:10\@xxs {
		font-size : var(--z10);
	}
}
@media (--mq-xs) {
	.f\:\.1\@xs,
				.f-z\:\.1\@xs {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@xs,
				.f-z\:\.2\@xs {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@xs,
				.f-z\:\.3\@xs {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@xs,
				.f-z\:\.4\@xs {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@xs,
				.f-z\:\.5\@xs {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@xs,
				.f-z\:\.6\@xs {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@xs,
				.f-z\:\.7\@xs {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@xs,
				.f-z\:\.8\@xs {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@xs,
				.f-z\:\.9\@xs {
		font-size : var(--z-dot9);
	}
	.f\:0\@xs,
				.f-z\:0\@xs {
		font-size : var(--z0);
	}
	.f\:1\@xs,
				.f-z\:1\@xs {
		font-size : var(--z1);
	}
	.f\:2\@xs,
				.f-z\:2\@xs {
		font-size : var(--z2);
	}
	.f\:3\@xs,
				.f-z\:3\@xs {
		font-size : var(--z3);
	}
	.f\:4\@xs,
				.f-z\:4\@xs {
		font-size : var(--z4);
	}
	.f\:5\@xs,
				.f-z\:5\@xs {
		font-size : var(--z5);
	}
	.f\:6\@xs,
				.f-z\:6\@xs {
		font-size : var(--z6);
	}
	.f\:7\@xs,
				.f-z\:7\@xs {
		font-size : var(--z7);
	}
	.f\:8\@xs,
				.f-z\:8\@xs {
		font-size : var(--z8);
	}
	.f\:9\@xs,
				.f-z\:9\@xs {
		font-size : var(--z9);
	}
	.f\:10\@xs,
				.f-z\:10\@xs {
		font-size : var(--z10);
	}
}
@media (--mq-sm) {
	.f\:\.1\@sm,
				.f-z\:\.1\@sm {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@sm,
				.f-z\:\.2\@sm {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@sm,
				.f-z\:\.3\@sm {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@sm,
				.f-z\:\.4\@sm {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@sm,
				.f-z\:\.5\@sm {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@sm,
				.f-z\:\.6\@sm {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@sm,
				.f-z\:\.7\@sm {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@sm,
				.f-z\:\.8\@sm {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@sm,
				.f-z\:\.9\@sm {
		font-size : var(--z-dot9);
	}
	.f\:0\@sm,
				.f-z\:0\@sm {
		font-size : var(--z0);
	}
	.f\:1\@sm,
				.f-z\:1\@sm {
		font-size : var(--z1);
	}
	.f\:2\@sm,
				.f-z\:2\@sm {
		font-size : var(--z2);
	}
	.f\:3\@sm,
				.f-z\:3\@sm {
		font-size : var(--z3);
	}
	.f\:4\@sm,
				.f-z\:4\@sm {
		font-size : var(--z4);
	}
	.f\:5\@sm,
				.f-z\:5\@sm {
		font-size : var(--z5);
	}
	.f\:6\@sm,
				.f-z\:6\@sm {
		font-size : var(--z6);
	}
	.f\:7\@sm,
				.f-z\:7\@sm {
		font-size : var(--z7);
	}
	.f\:8\@sm,
				.f-z\:8\@sm {
		font-size : var(--z8);
	}
	.f\:9\@sm,
				.f-z\:9\@sm {
		font-size : var(--z9);
	}
	.f\:10\@sm,
				.f-z\:10\@sm {
		font-size : var(--z10);
	}
}
@media (--mq-md) {
	.f\:\.1\@md,
				.f-z\:\.1\@md {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@md,
				.f-z\:\.2\@md {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@md,
				.f-z\:\.3\@md {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@md,
				.f-z\:\.4\@md {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@md,
				.f-z\:\.5\@md {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@md,
				.f-z\:\.6\@md {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@md,
				.f-z\:\.7\@md {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@md,
				.f-z\:\.8\@md {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@md,
				.f-z\:\.9\@md {
		font-size : var(--z-dot9);
	}
	.f\:0\@md,
				.f-z\:0\@md {
		font-size : var(--z0);
	}
	.f\:1\@md,
				.f-z\:1\@md {
		font-size : var(--z1);
	}
	.f\:2\@md,
				.f-z\:2\@md {
		font-size : var(--z2);
	}
	.f\:3\@md,
				.f-z\:3\@md {
		font-size : var(--z3);
	}
	.f\:4\@md,
				.f-z\:4\@md {
		font-size : var(--z4);
	}
	.f\:5\@md,
				.f-z\:5\@md {
		font-size : var(--z5);
	}
	.f\:6\@md,
				.f-z\:6\@md {
		font-size : var(--z6);
	}
	.f\:7\@md,
				.f-z\:7\@md {
		font-size : var(--z7);
	}
	.f\:8\@md,
				.f-z\:8\@md {
		font-size : var(--z8);
	}
	.f\:9\@md,
				.f-z\:9\@md {
		font-size : var(--z9);
	}
	.f\:10\@md,
				.f-z\:10\@md {
		font-size : var(--z10);
	}
}
@media (--mq-lg) {
	.f\:\.1\@lg,
				.f-z\:\.1\@lg {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@lg,
				.f-z\:\.2\@lg {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@lg,
				.f-z\:\.3\@lg {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@lg,
				.f-z\:\.4\@lg {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@lg,
				.f-z\:\.5\@lg {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@lg,
				.f-z\:\.6\@lg {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@lg,
				.f-z\:\.7\@lg {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@lg,
				.f-z\:\.8\@lg {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@lg,
				.f-z\:\.9\@lg {
		font-size : var(--z-dot9);
	}
	.f\:0\@lg,
				.f-z\:0\@lg {
		font-size : var(--z0);
	}
	.f\:1\@lg,
				.f-z\:1\@lg {
		font-size : var(--z1);
	}
	.f\:2\@lg,
				.f-z\:2\@lg {
		font-size : var(--z2);
	}
	.f\:3\@lg,
				.f-z\:3\@lg {
		font-size : var(--z3);
	}
	.f\:4\@lg,
				.f-z\:4\@lg {
		font-size : var(--z4);
	}
	.f\:5\@lg,
				.f-z\:5\@lg {
		font-size : var(--z5);
	}
	.f\:6\@lg,
				.f-z\:6\@lg {
		font-size : var(--z6);
	}
	.f\:7\@lg,
				.f-z\:7\@lg {
		font-size : var(--z7);
	}
	.f\:8\@lg,
				.f-z\:8\@lg {
		font-size : var(--z8);
	}
	.f\:9\@lg,
				.f-z\:9\@lg {
		font-size : var(--z9);
	}
	.f\:10\@lg,
				.f-z\:10\@lg {
		font-size : var(--z10);
	}
}
@media (--mq-xl) {
	.f\:\.1\@xl,
				.f-z\:\.1\@xl {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@xl,
				.f-z\:\.2\@xl {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@xl,
				.f-z\:\.3\@xl {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@xl,
				.f-z\:\.4\@xl {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@xl,
				.f-z\:\.5\@xl {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@xl,
				.f-z\:\.6\@xl {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@xl,
				.f-z\:\.7\@xl {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@xl,
				.f-z\:\.8\@xl {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@xl,
				.f-z\:\.9\@xl {
		font-size : var(--z-dot9);
	}
	.f\:0\@xl,
				.f-z\:0\@xl {
		font-size : var(--z0);
	}
	.f\:1\@xl,
				.f-z\:1\@xl {
		font-size : var(--z1);
	}
	.f\:2\@xl,
				.f-z\:2\@xl {
		font-size : var(--z2);
	}
	.f\:3\@xl,
				.f-z\:3\@xl {
		font-size : var(--z3);
	}
	.f\:4\@xl,
				.f-z\:4\@xl {
		font-size : var(--z4);
	}
	.f\:5\@xl,
				.f-z\:5\@xl {
		font-size : var(--z5);
	}
	.f\:6\@xl,
				.f-z\:6\@xl {
		font-size : var(--z6);
	}
	.f\:7\@xl,
				.f-z\:7\@xl {
		font-size : var(--z7);
	}
	.f\:8\@xl,
				.f-z\:8\@xl {
		font-size : var(--z8);
	}
	.f\:9\@xl,
				.f-z\:9\@xl {
		font-size : var(--z9);
	}
	.f\:10\@xl,
				.f-z\:10\@xl {
		font-size : var(--z10);
	}
}
@media (--mq-xxl) {
	.f\:\.1\@xxl,
				.f-z\:\.1\@xxl {
		font-size : var(--z-dot1);
	}
	.f\:\.2\@xxl,
				.f-z\:\.2\@xxl {
		font-size : var(--z-dot2);
	}
	.f\:\.3\@xxl,
				.f-z\:\.3\@xxl {
		font-size : var(--z-dot3);
	}
	.f\:\.4\@xxl,
				.f-z\:\.4\@xxl {
		font-size : var(--z-dot4);
	}
	.f\:\.5\@xxl,
				.f-z\:\.5\@xxl {
		font-size : var(--z-dot5);
	}
	.f\:\.6\@xxl,
				.f-z\:\.6\@xxl {
		font-size : var(--z-dot6);
	}
	.f\:\.7\@xxl,
				.f-z\:\.7\@xxl {
		font-size : var(--z-dot7);
	}
	.f\:\.8\@xxl,
				.f-z\:\.8\@xxl {
		font-size : var(--z-dot8);
	}
	.f\:\.9\@xxl,
				.f-z\:\.9\@xxl {
		font-size : var(--z-dot9);
	}
	.f\:0\@xxl,
				.f-z\:0\@xxl {
		font-size : var(--z0);
	}
	.f\:1\@xxl,
				.f-z\:1\@xxl {
		font-size : var(--z1);
	}
	.f\:2\@xxl,
				.f-z\:2\@xxl {
		font-size : var(--z2);
	}
	.f\:3\@xxl,
				.f-z\:3\@xxl {
		font-size : var(--z3);
	}
	.f\:4\@xxl,
				.f-z\:4\@xxl {
		font-size : var(--z4);
	}
	.f\:5\@xxl,
				.f-z\:5\@xxl {
		font-size : var(--z5);
	}
	.f\:6\@xxl,
				.f-z\:6\@xxl {
		font-size : var(--z6);
	}
	.f\:7\@xxl,
				.f-z\:7\@xxl {
		font-size : var(--z7);
	}
	.f\:8\@xxl,
				.f-z\:8\@xxl {
		font-size : var(--z8);
	}
	.f\:9\@xxl,
				.f-z\:9\@xxl {
		font-size : var(--z9);
	}
	.f\:10\@xxl,
				.f-z\:10\@xxl {
		font-size : var(--z10);
	}
}
/*---
				title: -5
				section: z-index
				---

				```example:html
				<span class=".z-i:-5">z-i:-5</span>
				```
			*/
.z-i\:-5 {
	z-index : -5;
}
/*---
				title: -4
				section: z-index
				---

				```example:html
				<span class=".z-i:-4">z-i:-4</span>
				```
			*/
.z-i\:-4 {
	z-index : -4;
}
/*---
				title: -3
				section: z-index
				---

				```example:html
				<span class=".z-i:-3">z-i:-3</span>
				```
			*/
.z-i\:-3 {
	z-index : -3;
}
/*---
				title: -2
				section: z-index
				---

				```example:html
				<span class=".z-i:-2">z-i:-2</span>
				```
			*/
.z-i\:-2 {
	z-index : -2;
}
/*---
				title: -1
				section: z-index
				---

				```example:html
				<span class=".z-i:-1">z-i:-1</span>
				```
			*/
.z-i\:-1 {
	z-index : -1;
}
/*---
				title: 0
				section: z-index
				---

				```example:html
				<span class=".z-i:0">z-i:0</span>
				```
			*/
.z-i\:0 {
	z-index : 0;
}
/*---
				title: 1
				section: z-index
				---

				```example:html
				<span class=".z-i:1">z-i:1</span>
				```
			*/
.z-i\:1 {
	z-index : 1;
}
/*---
				title: 2
				section: z-index
				---

				```example:html
				<span class=".z-i:2">z-i:2</span>
				```
			*/
.z-i\:2 {
	z-index : 2;
}
/*---
				title: 3
				section: z-index
				---

				```example:html
				<span class=".z-i:3">z-i:3</span>
				```
			*/
.z-i\:3 {
	z-index : 3;
}
/*---
				title: 4
				section: z-index
				---

				```example:html
				<span class=".z-i:4">z-i:4</span>
				```
			*/
.z-i\:4 {
	z-index : 4;
}
/*---
				title: 5
				section: z-index
				---

				```example:html
				<span class=".z-i:5">z-i:5</span>
				```
			*/
.z-i\:5 {
	z-index : 5;
}
@media (--mq-xxs) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@xxs {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@xxs {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@xxs {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@xxs {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@xxs {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@xxs {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@xxs {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@xxs {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@xxs {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@xxs {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@xxs {
		z-index : 5;
	}
}
@media (--mq-xs) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@xs {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@xs {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@xs {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@xs {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@xs {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@xs {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@xs {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@xs {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@xs {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@xs {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@xs {
		z-index : 5;
	}
}
@media (--mq-sm) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@sm {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@sm {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@sm {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@sm {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@sm {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@sm {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@sm {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@sm {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@sm {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@sm {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@sm {
		z-index : 5;
	}
}
@media (--mq-md) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@md {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@md {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@md {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@md {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@md {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@md {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@md {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@md {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@md {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@md {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@md {
		z-index : 5;
	}
}
@media (--mq-lg) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@lg {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@lg {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@lg {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@lg {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@lg {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@lg {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@lg {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@lg {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@lg {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@lg {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@lg {
		z-index : 5;
	}
}
@media (--mq-xl) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@xl {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@xl {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@xl {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@xl {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@xl {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@xl {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@xl {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@xl {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@xl {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@xl {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@xl {
		z-index : 5;
	}
}
@media (--mq-xxl) {
	/*---
					title: -5
					section: z-index
					---

					```example:html
					<span class=".z-i:-5@$(mq)">z-i:-5@$(mq)</span>
					```
				*/
	.z-i\:-5\@xxl {
		z-index : -5;
	}
	/*---
					title: -4
					section: z-index
					---

					```example:html
					<span class=".z-i:-4@$(mq)">z-i:-4@$(mq)</span>
					```
				*/
	.z-i\:-4\@xxl {
		z-index : -4;
	}
	/*---
					title: -3
					section: z-index
					---

					```example:html
					<span class=".z-i:-3@$(mq)">z-i:-3@$(mq)</span>
					```
				*/
	.z-i\:-3\@xxl {
		z-index : -3;
	}
	/*---
					title: -2
					section: z-index
					---

					```example:html
					<span class=".z-i:-2@$(mq)">z-i:-2@$(mq)</span>
					```
				*/
	.z-i\:-2\@xxl {
		z-index : -2;
	}
	/*---
					title: -1
					section: z-index
					---

					```example:html
					<span class=".z-i:-1@$(mq)">z-i:-1@$(mq)</span>
					```
				*/
	.z-i\:-1\@xxl {
		z-index : -1;
	}
	/*---
					title: 0
					section: z-index
					---

					```example:html
					<span class=".z-i:0@$(mq)">z-i:0@$(mq)</span>
					```
				*/
	.z-i\:0\@xxl {
		z-index : 0;
	}
	/*---
					title: 1
					section: z-index
					---

					```example:html
					<span class=".z-i:1@$(mq)">z-i:1@$(mq)</span>
					```
				*/
	.z-i\:1\@xxl {
		z-index : 1;
	}
	/*---
					title: 2
					section: z-index
					---

					```example:html
					<span class=".z-i:2@$(mq)">z-i:2@$(mq)</span>
					```
				*/
	.z-i\:2\@xxl {
		z-index : 2;
	}
	/*---
					title: 3
					section: z-index
					---

					```example:html
					<span class=".z-i:3@$(mq)">z-i:3@$(mq)</span>
					```
				*/
	.z-i\:3\@xxl {
		z-index : 3;
	}
	/*---
					title: 4
					section: z-index
					---

					```example:html
					<span class=".z-i:4@$(mq)">z-i:4@$(mq)</span>
					```
				*/
	.z-i\:4\@xxl {
		z-index : 4;
	}
	/*---
					title: 5
					section: z-index
					---

					```example:html
					<span class=".z-i:5@$(mq)">z-i:5@$(mq)</span>
					```
				*/
	.z-i\:5\@xxl {
		z-index : 5;
	}
}
:root {
	--f-w-min: 100;
	--f-w-max: 900;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:100">f-w:100</span>
				```
			*/
.f-w\:100 {
	font-weight : 100;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:200">f-w:200</span>
				```
			*/
.f-w\:200 {
	font-weight : 200;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:300">f-w:300</span>
				```
			*/
.f-w\:300 {
	font-weight : 300;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:400">f-w:400</span>
				```
			*/
.f-w\:400 {
	font-weight : 400;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:500">f-w:500</span>
				```
			*/
.f-w\:500 {
	font-weight : 500;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:600">f-w:600</span>
				```
			*/
.f-w\:600 {
	font-weight : 600;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:700">f-w:700</span>
				```
			*/
.f-w\:700 {
	font-weight : 700;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:800">f-w:800</span>
				```
			*/
.f-w\:800 {
	font-weight : 800;
}
/*---
				title: Font Weight
				section: Typography
				---

				```html
				<span class=".f-w:900">f-w:900</span>
				```
			*/
.f-w\:900 {
	font-weight : 900;
}
@media (--mq-xxs) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@xxs {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@xxs {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@xxs {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@xxs {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@xxs {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@xxs {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@xxs {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@xxs {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@xxs {
		font-weight : 900;
	}
}
@media (--mq-xs) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@xs {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@xs {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@xs {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@xs {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@xs {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@xs {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@xs {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@xs {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@xs {
		font-weight : 900;
	}
}
@media (--mq-sm) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@sm {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@sm {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@sm {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@sm {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@sm {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@sm {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@sm {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@sm {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@sm {
		font-weight : 900;
	}
}
@media (--mq-md) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@md {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@md {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@md {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@md {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@md {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@md {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@md {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@md {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@md {
		font-weight : 900;
	}
}
@media (--mq-lg) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@lg {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@lg {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@lg {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@lg {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@lg {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@lg {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@lg {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@lg {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@lg {
		font-weight : 900;
	}
}
@media (--mq-xl) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@xl {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@xl {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@xl {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@xl {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@xl {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@xl {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@xl {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@xl {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@xl {
		font-weight : 900;
	}
}
@media (--mq-xxl) {
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:100@$(mq)">f-w:100@$(mq)</span>
					```
				*/
	.f-w\:100\@xxl {
		font-weight : 100;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:200@$(mq)">f-w:200@$(mq)</span>
					```
				*/
	.f-w\:200\@xxl {
		font-weight : 200;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:300@$(mq)">f-w:300@$(mq)</span>
					```
				*/
	.f-w\:300\@xxl {
		font-weight : 300;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:400@$(mq)">f-w:400@$(mq)</span>
					```
				*/
	.f-w\:400\@xxl {
		font-weight : 400;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:500@$(mq)">f-w:500@$(mq)</span>
					```
				*/
	.f-w\:500\@xxl {
		font-weight : 500;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:600@$(mq)">f-w:600@$(mq)</span>
					```
				*/
	.f-w\:600\@xxl {
		font-weight : 600;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:700@$(mq)">f-w:700@$(mq)</span>
					```
				*/
	.f-w\:700\@xxl {
		font-weight : 700;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:800@$(mq)">f-w:800@$(mq)</span>
					```
				*/
	.f-w\:800\@xxl {
		font-weight : 800;
	}
	/*---
					title: Font Weight
					section: Typography
					---

					```html
					<span class=".f-w:900@$(mq)">f-w:900@$(mq)</span>
					```
				*/
	.f-w\:900\@xxl {
		font-weight : 900;
	}
}
:root {
	--f-f-sans: sans-serif;
	--f-f-serif: serif;
	--f-f-mono: monospace;
	--f-f-styles: (sans, serif, mono), (f-f-sans, f-f-serif, f-f-mono);
}
/*---
	title: Font Family
	section: Typography
	---

	```html
	<span class=".f-f:$(style)">f-f:$(style)</span>
	```
	 */
.f-f\:sans {
	font-family : var(--f-f-sans);
}
/*---
	title: Font Family
	section: Typography
	---

	```html
	<span class=".f-f:$(style)">f-f:$(style)</span>
	```
	 */
.f-f\:serif {
	font-family : var(--f-f-serif);
}
/*---
	title: Font Family
	section: Typography
	---

	```html
	<span class=".f-f:$(style)">f-f:$(style)</span>
	```
	 */
.f-f\:mono {
	font-family : var(--f-f-mono);
}
:root {
	--f-s-styles: (normal, italic, oblique), (n, i, o);
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".f-s:$(sshort)">f-s:$(sshort)</span>
				```
			*/
.f-s\:n {
	font-style : normal;
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".f-s:$(sshort)">f-s:$(sshort)</span>
				```
			*/
.f-s\:i {
	font-style : italic;
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".f-s:$(sshort)">f-s:$(sshort)</span>
				```
			*/
.f-s\:o {
	font-style : oblique;
}
@media (--mq-xxs) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@xxs {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@xxs {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@xxs {
		font-style : oblique;
	}
}
@media (--mq-xs) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@xs {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@xs {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@xs {
		font-style : oblique;
	}
}
@media (--mq-sm) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@sm {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@sm {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@sm {
		font-style : oblique;
	}
}
@media (--mq-md) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@md {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@md {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@md {
		font-style : oblique;
	}
}
@media (--mq-lg) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@lg {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@lg {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@lg {
		font-style : oblique;
	}
}
@media (--mq-xl) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@xl {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@xl {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@xl {
		font-style : oblique;
	}
}
@media (--mq-xxl) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:n\@xxl {
		font-style : normal;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:i\@xxl {
		font-style : italic;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".f-s:$(sshort)\@$(mq)">f-s:$(sshort)@$(mq)</span>
					```
				*/
	.f-s\:o\@xxl {
		font-style : oblique;
	}
}
:root {
	--t-a-options: (left, right, center, justify), (l, r, c, j);
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".t-a:$(var)">t-a:$(var)</span>
				```
			*/
.t-a\:l {
	text-align : left;
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".t-a:$(var)">t-a:$(var)</span>
				```
			*/
.t-a\:r {
	text-align : right;
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".t-a:$(var)">t-a:$(var)</span>
				```
			*/
.t-a\:c {
	text-align : center;
}
/*---
				title: $(style)
				section: Font Style
				---

				```html
				<span class=".t-a:$(var)">t-a:$(var)</span>
				```
			*/
.t-a\:j {
	text-align : justify;
}
@media (--mq-xxs) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@xxs {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@xxs {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@xxs {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@xxs {
		text-align : justify;
	}
}
@media (--mq-xs) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@xs {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@xs {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@xs {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@xs {
		text-align : justify;
	}
}
@media (--mq-sm) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@sm {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@sm {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@sm {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@sm {
		text-align : justify;
	}
}
@media (--mq-md) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@md {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@md {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@md {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@md {
		text-align : justify;
	}
}
@media (--mq-lg) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@lg {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@lg {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@lg {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@lg {
		text-align : justify;
	}
}
@media (--mq-xl) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@xl {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@xl {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@xl {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@xl {
		text-align : justify;
	}
}
@media (--mq-xxl) {
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:l\@xxl {
		text-align : left;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:r\@xxl {
		text-align : right;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:c\@xxl {
		text-align : center;
	}
	/*---
					title: $(style)
					section: Font Style
					---

					```html
					<span class=".t-a:$(var)\@$(mq)">t-a:$(var)@$(mq)</span>
					```
				*/
	.t-a\:j\@xxl {
		text-align : justify;
	}
}
.m\:a {
	margin : auto;
}
.m\:\.1 {
	margin : var(--z-dot1);
}
.m\:\.2 {
	margin : var(--z-dot2);
}
.m\:\.3 {
	margin : var(--z-dot3);
}
.m\:\.4 {
	margin : var(--z-dot4);
}
.m\:\.5 {
	margin : var(--z-dot5);
}
.m\:\.6 {
	margin : var(--z-dot6);
}
.m\:\.7 {
	margin : var(--z-dot7);
}
.m\:\.8 {
	margin : var(--z-dot8);
}
.m\:\.9 {
	margin : var(--z-dot9);
}
.m\:0 {
	margin : var(--z0);
}
.m\:1 {
	margin : var(--z1);
}
.m\:2 {
	margin : var(--z2);
}
.m\:3 {
	margin : var(--z3);
}
.m\:4 {
	margin : var(--z4);
}
.m\:5 {
	margin : var(--z5);
}
.m\:6 {
	margin : var(--z6);
}
.m\:7 {
	margin : var(--z7);
}
.m\:8 {
	margin : var(--z8);
}
.m\:9 {
	margin : var(--z9);
}
.m\:10 {
	margin : var(--z10);
}
.m-t\:a {
	margin-top : auto;
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.1 {
	margin-top : var(--z-dot1);
}
.m-t\:-\.1 {
	margin-top : -var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.2 {
	margin-top : var(--z-dot2);
}
.m-t\:-\.2 {
	margin-top : -var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.3 {
	margin-top : var(--z-dot3);
}
.m-t\:-\.3 {
	margin-top : -var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.4 {
	margin-top : var(--z-dot4);
}
.m-t\:-\.4 {
	margin-top : -var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.5 {
	margin-top : var(--z-dot5);
}
.m-t\:-\.5 {
	margin-top : -var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.6 {
	margin-top : var(--z-dot6);
}
.m-t\:-\.6 {
	margin-top : -var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.7 {
	margin-top : var(--z-dot7);
}
.m-t\:-\.7 {
	margin-top : -var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.8 {
	margin-top : var(--z-dot8);
}
.m-t\:-\.8 {
	margin-top : -var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:\.9 {
	margin-top : var(--z-dot9);
}
.m-t\:-\.9 {
	margin-top : -var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:0 {
	margin-top : var(--z0);
}
.m-t\:-0 {
	margin-top : -var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:1 {
	margin-top : var(--z1);
}
.m-t\:-1 {
	margin-top : -var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:2 {
	margin-top : var(--z2);
}
.m-t\:-2 {
	margin-top : -var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:3 {
	margin-top : var(--z3);
}
.m-t\:-3 {
	margin-top : -var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:4 {
	margin-top : var(--z4);
}
.m-t\:-4 {
	margin-top : -var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:5 {
	margin-top : var(--z5);
}
.m-t\:-5 {
	margin-top : -var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:6 {
	margin-top : var(--z6);
}
.m-t\:-6 {
	margin-top : -var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:7 {
	margin-top : var(--z7);
}
.m-t\:-7 {
	margin-top : -var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:8 {
	margin-top : var(--z8);
}
.m-t\:-8 {
	margin-top : -var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:9 {
	margin-top : var(--z9);
}
.m-t\:-9 {
	margin-top : -var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-t\:10 {
	margin-top : var(--z10);
}
.m-t\:-10 {
	margin-top : -var(--z10);
}
.m-b\:a {
	margin-bottom : auto;
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.1 {
	margin-bottom : var(--z-dot1);
}
.m-b\:-\.1 {
	margin-bottom : -var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.2 {
	margin-bottom : var(--z-dot2);
}
.m-b\:-\.2 {
	margin-bottom : -var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.3 {
	margin-bottom : var(--z-dot3);
}
.m-b\:-\.3 {
	margin-bottom : -var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.4 {
	margin-bottom : var(--z-dot4);
}
.m-b\:-\.4 {
	margin-bottom : -var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.5 {
	margin-bottom : var(--z-dot5);
}
.m-b\:-\.5 {
	margin-bottom : -var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.6 {
	margin-bottom : var(--z-dot6);
}
.m-b\:-\.6 {
	margin-bottom : -var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.7 {
	margin-bottom : var(--z-dot7);
}
.m-b\:-\.7 {
	margin-bottom : -var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.8 {
	margin-bottom : var(--z-dot8);
}
.m-b\:-\.8 {
	margin-bottom : -var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:\.9 {
	margin-bottom : var(--z-dot9);
}
.m-b\:-\.9 {
	margin-bottom : -var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:0 {
	margin-bottom : var(--z0);
}
.m-b\:-0 {
	margin-bottom : -var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:1 {
	margin-bottom : var(--z1);
}
.m-b\:-1 {
	margin-bottom : -var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:2 {
	margin-bottom : var(--z2);
}
.m-b\:-2 {
	margin-bottom : -var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:3 {
	margin-bottom : var(--z3);
}
.m-b\:-3 {
	margin-bottom : -var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:4 {
	margin-bottom : var(--z4);
}
.m-b\:-4 {
	margin-bottom : -var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:5 {
	margin-bottom : var(--z5);
}
.m-b\:-5 {
	margin-bottom : -var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:6 {
	margin-bottom : var(--z6);
}
.m-b\:-6 {
	margin-bottom : -var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:7 {
	margin-bottom : var(--z7);
}
.m-b\:-7 {
	margin-bottom : -var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:8 {
	margin-bottom : var(--z8);
}
.m-b\:-8 {
	margin-bottom : -var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:9 {
	margin-bottom : var(--z9);
}
.m-b\:-9 {
	margin-bottom : -var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-b\:10 {
	margin-bottom : var(--z10);
}
.m-b\:-10 {
	margin-bottom : -var(--z10);
}
.m-l\:a {
	margin-left : auto;
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.1 {
	margin-left : var(--z-dot1);
}
.m-l\:-\.1 {
	margin-left : -var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.2 {
	margin-left : var(--z-dot2);
}
.m-l\:-\.2 {
	margin-left : -var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.3 {
	margin-left : var(--z-dot3);
}
.m-l\:-\.3 {
	margin-left : -var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.4 {
	margin-left : var(--z-dot4);
}
.m-l\:-\.4 {
	margin-left : -var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.5 {
	margin-left : var(--z-dot5);
}
.m-l\:-\.5 {
	margin-left : -var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.6 {
	margin-left : var(--z-dot6);
}
.m-l\:-\.6 {
	margin-left : -var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.7 {
	margin-left : var(--z-dot7);
}
.m-l\:-\.7 {
	margin-left : -var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.8 {
	margin-left : var(--z-dot8);
}
.m-l\:-\.8 {
	margin-left : -var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:\.9 {
	margin-left : var(--z-dot9);
}
.m-l\:-\.9 {
	margin-left : -var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:0 {
	margin-left : var(--z0);
}
.m-l\:-0 {
	margin-left : -var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:1 {
	margin-left : var(--z1);
}
.m-l\:-1 {
	margin-left : -var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:2 {
	margin-left : var(--z2);
}
.m-l\:-2 {
	margin-left : -var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:3 {
	margin-left : var(--z3);
}
.m-l\:-3 {
	margin-left : -var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:4 {
	margin-left : var(--z4);
}
.m-l\:-4 {
	margin-left : -var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:5 {
	margin-left : var(--z5);
}
.m-l\:-5 {
	margin-left : -var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:6 {
	margin-left : var(--z6);
}
.m-l\:-6 {
	margin-left : -var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:7 {
	margin-left : var(--z7);
}
.m-l\:-7 {
	margin-left : -var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:8 {
	margin-left : var(--z8);
}
.m-l\:-8 {
	margin-left : -var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:9 {
	margin-left : var(--z9);
}
.m-l\:-9 {
	margin-left : -var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-l\:10 {
	margin-left : var(--z10);
}
.m-l\:-10 {
	margin-left : -var(--z10);
}
.m-r\:a {
	margin-right : auto;
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.1 {
	margin-right : var(--z-dot1);
}
.m-r\:-\.1 {
	margin-right : -var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.2 {
	margin-right : var(--z-dot2);
}
.m-r\:-\.2 {
	margin-right : -var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.3 {
	margin-right : var(--z-dot3);
}
.m-r\:-\.3 {
	margin-right : -var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.4 {
	margin-right : var(--z-dot4);
}
.m-r\:-\.4 {
	margin-right : -var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.5 {
	margin-right : var(--z-dot5);
}
.m-r\:-\.5 {
	margin-right : -var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.6 {
	margin-right : var(--z-dot6);
}
.m-r\:-\.6 {
	margin-right : -var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.7 {
	margin-right : var(--z-dot7);
}
.m-r\:-\.7 {
	margin-right : -var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.8 {
	margin-right : var(--z-dot8);
}
.m-r\:-\.8 {
	margin-right : -var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:\.9 {
	margin-right : var(--z-dot9);
}
.m-r\:-\.9 {
	margin-right : -var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:0 {
	margin-right : var(--z0);
}
.m-r\:-0 {
	margin-right : -var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:1 {
	margin-right : var(--z1);
}
.m-r\:-1 {
	margin-right : -var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:2 {
	margin-right : var(--z2);
}
.m-r\:-2 {
	margin-right : -var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:3 {
	margin-right : var(--z3);
}
.m-r\:-3 {
	margin-right : -var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:4 {
	margin-right : var(--z4);
}
.m-r\:-4 {
	margin-right : -var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:5 {
	margin-right : var(--z5);
}
.m-r\:-5 {
	margin-right : -var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:6 {
	margin-right : var(--z6);
}
.m-r\:-6 {
	margin-right : -var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:7 {
	margin-right : var(--z7);
}
.m-r\:-7 {
	margin-right : -var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:8 {
	margin-right : var(--z8);
}
.m-r\:-8 {
	margin-right : -var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:9 {
	margin-right : var(--z9);
}
.m-r\:-9 {
	margin-right : -var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-r\:10 {
	margin-right : var(--z10);
}
.m-r\:-10 {
	margin-right : -var(--z10);
}
.m-x\:a {
	margin-left : auto;
	margin-right : auto;
}
.m-x\:r {
	margin-left : calc(-50vw + 50%);
	margin-right : calc(-50vw + 50%);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.1 {
	margin-left : var(--z-dot1);
	margin-right : var(--z-dot1);
}
.m-x\:-\.1 {
	margin-left : -var(--z-dot1);
	margin-right : -var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.2 {
	margin-left : var(--z-dot2);
	margin-right : var(--z-dot2);
}
.m-x\:-\.2 {
	margin-left : -var(--z-dot2);
	margin-right : -var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.3 {
	margin-left : var(--z-dot3);
	margin-right : var(--z-dot3);
}
.m-x\:-\.3 {
	margin-left : -var(--z-dot3);
	margin-right : -var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.4 {
	margin-left : var(--z-dot4);
	margin-right : var(--z-dot4);
}
.m-x\:-\.4 {
	margin-left : -var(--z-dot4);
	margin-right : -var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.5 {
	margin-left : var(--z-dot5);
	margin-right : var(--z-dot5);
}
.m-x\:-\.5 {
	margin-left : -var(--z-dot5);
	margin-right : -var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.6 {
	margin-left : var(--z-dot6);
	margin-right : var(--z-dot6);
}
.m-x\:-\.6 {
	margin-left : -var(--z-dot6);
	margin-right : -var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.7 {
	margin-left : var(--z-dot7);
	margin-right : var(--z-dot7);
}
.m-x\:-\.7 {
	margin-left : -var(--z-dot7);
	margin-right : -var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.8 {
	margin-left : var(--z-dot8);
	margin-right : var(--z-dot8);
}
.m-x\:-\.8 {
	margin-left : -var(--z-dot8);
	margin-right : -var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:\.9 {
	margin-left : var(--z-dot9);
	margin-right : var(--z-dot9);
}
.m-x\:-\.9 {
	margin-left : -var(--z-dot9);
	margin-right : -var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:0 {
	margin-left : var(--z0);
	margin-right : var(--z0);
}
.m-x\:-0 {
	margin-left : -var(--z0);
	margin-right : -var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:1 {
	margin-left : var(--z1);
	margin-right : var(--z1);
}
.m-x\:-1 {
	margin-left : -var(--z1);
	margin-right : -var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:2 {
	margin-left : var(--z2);
	margin-right : var(--z2);
}
.m-x\:-2 {
	margin-left : -var(--z2);
	margin-right : -var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:3 {
	margin-left : var(--z3);
	margin-right : var(--z3);
}
.m-x\:-3 {
	margin-left : -var(--z3);
	margin-right : -var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:4 {
	margin-left : var(--z4);
	margin-right : var(--z4);
}
.m-x\:-4 {
	margin-left : -var(--z4);
	margin-right : -var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:5 {
	margin-left : var(--z5);
	margin-right : var(--z5);
}
.m-x\:-5 {
	margin-left : -var(--z5);
	margin-right : -var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:6 {
	margin-left : var(--z6);
	margin-right : var(--z6);
}
.m-x\:-6 {
	margin-left : -var(--z6);
	margin-right : -var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:7 {
	margin-left : var(--z7);
	margin-right : var(--z7);
}
.m-x\:-7 {
	margin-left : -var(--z7);
	margin-right : -var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:8 {
	margin-left : var(--z8);
	margin-right : var(--z8);
}
.m-x\:-8 {
	margin-left : -var(--z8);
	margin-right : -var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:9 {
	margin-left : var(--z9);
	margin-right : var(--z9);
}
.m-x\:-9 {
	margin-left : -var(--z9);
	margin-right : -var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-x\:10 {
	margin-left : var(--z10);
	margin-right : var(--z10);
}
.m-x\:-10 {
	margin-left : -var(--z10);
	margin-right : -var(--z10);
}
.m-y\:a {
	margin-top : auto;
	margin-bottom : auto;
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.1 {
	margin-top : var(--z-dot1);
	margin-bottom : var(--z-dot1);
}
.m-y\:-\.1 {
	margin-top : -var(--z-dot1);
	margin-bottom : -var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.2 {
	margin-top : var(--z-dot2);
	margin-bottom : var(--z-dot2);
}
.m-y\:-\.2 {
	margin-top : -var(--z-dot2);
	margin-bottom : -var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.3 {
	margin-top : var(--z-dot3);
	margin-bottom : var(--z-dot3);
}
.m-y\:-\.3 {
	margin-top : -var(--z-dot3);
	margin-bottom : -var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.4 {
	margin-top : var(--z-dot4);
	margin-bottom : var(--z-dot4);
}
.m-y\:-\.4 {
	margin-top : -var(--z-dot4);
	margin-bottom : -var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.5 {
	margin-top : var(--z-dot5);
	margin-bottom : var(--z-dot5);
}
.m-y\:-\.5 {
	margin-top : -var(--z-dot5);
	margin-bottom : -var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.6 {
	margin-top : var(--z-dot6);
	margin-bottom : var(--z-dot6);
}
.m-y\:-\.6 {
	margin-top : -var(--z-dot6);
	margin-bottom : -var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.7 {
	margin-top : var(--z-dot7);
	margin-bottom : var(--z-dot7);
}
.m-y\:-\.7 {
	margin-top : -var(--z-dot7);
	margin-bottom : -var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.8 {
	margin-top : var(--z-dot8);
	margin-bottom : var(--z-dot8);
}
.m-y\:-\.8 {
	margin-top : -var(--z-dot8);
	margin-bottom : -var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:\.9 {
	margin-top : var(--z-dot9);
	margin-bottom : var(--z-dot9);
}
.m-y\:-\.9 {
	margin-top : -var(--z-dot9);
	margin-bottom : -var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:0 {
	margin-top : var(--z0);
	margin-bottom : var(--z0);
}
.m-y\:-0 {
	margin-top : -var(--z0);
	margin-bottom : -var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:1 {
	margin-top : var(--z1);
	margin-bottom : var(--z1);
}
.m-y\:-1 {
	margin-top : -var(--z1);
	margin-bottom : -var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:2 {
	margin-top : var(--z2);
	margin-bottom : var(--z2);
}
.m-y\:-2 {
	margin-top : -var(--z2);
	margin-bottom : -var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:3 {
	margin-top : var(--z3);
	margin-bottom : var(--z3);
}
.m-y\:-3 {
	margin-top : -var(--z3);
	margin-bottom : -var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:4 {
	margin-top : var(--z4);
	margin-bottom : var(--z4);
}
.m-y\:-4 {
	margin-top : -var(--z4);
	margin-bottom : -var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:5 {
	margin-top : var(--z5);
	margin-bottom : var(--z5);
}
.m-y\:-5 {
	margin-top : -var(--z5);
	margin-bottom : -var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:6 {
	margin-top : var(--z6);
	margin-bottom : var(--z6);
}
.m-y\:-6 {
	margin-top : -var(--z6);
	margin-bottom : -var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:7 {
	margin-top : var(--z7);
	margin-bottom : var(--z7);
}
.m-y\:-7 {
	margin-top : -var(--z7);
	margin-bottom : -var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:8 {
	margin-top : var(--z8);
	margin-bottom : var(--z8);
}
.m-y\:-8 {
	margin-top : -var(--z8);
	margin-bottom : -var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:9 {
	margin-top : var(--z9);
	margin-bottom : var(--z9);
}
.m-y\:-9 {
	margin-top : -var(--z9);
	margin-bottom : -var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.m-y\:10 {
	margin-top : var(--z10);
	margin-bottom : var(--z10);
}
.m-y\:-10 {
	margin-top : -var(--z10);
	margin-bottom : -var(--z10);
}
.p\:\.1 {
	padding : var(--z-dot1);
}
.p\:\.2 {
	padding : var(--z-dot2);
}
.p\:\.3 {
	padding : var(--z-dot3);
}
.p\:\.4 {
	padding : var(--z-dot4);
}
.p\:\.5 {
	padding : var(--z-dot5);
}
.p\:\.6 {
	padding : var(--z-dot6);
}
.p\:\.7 {
	padding : var(--z-dot7);
}
.p\:\.8 {
	padding : var(--z-dot8);
}
.p\:\.9 {
	padding : var(--z-dot9);
}
.p\:0 {
	padding : var(--z0);
}
.p\:1 {
	padding : var(--z1);
}
.p\:2 {
	padding : var(--z2);
}
.p\:3 {
	padding : var(--z3);
}
.p\:4 {
	padding : var(--z4);
}
.p\:5 {
	padding : var(--z5);
}
.p\:6 {
	padding : var(--z6);
}
.p\:7 {
	padding : var(--z7);
}
.p\:8 {
	padding : var(--z8);
}
.p\:9 {
	padding : var(--z9);
}
.p\:10 {
	padding : var(--z10);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.1 {
	padding-top : var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.2 {
	padding-top : var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.3 {
	padding-top : var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.4 {
	padding-top : var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.5 {
	padding-top : var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.6 {
	padding-top : var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.7 {
	padding-top : var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.8 {
	padding-top : var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:\.9 {
	padding-top : var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:0 {
	padding-top : var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:1 {
	padding-top : var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:2 {
	padding-top : var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:3 {
	padding-top : var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:4 {
	padding-top : var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:5 {
	padding-top : var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:6 {
	padding-top : var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:7 {
	padding-top : var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:8 {
	padding-top : var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:9 {
	padding-top : var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-t\:10 {
	padding-top : var(--z10);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.1 {
	padding-bottom : var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.2 {
	padding-bottom : var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.3 {
	padding-bottom : var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.4 {
	padding-bottom : var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.5 {
	padding-bottom : var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.6 {
	padding-bottom : var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.7 {
	padding-bottom : var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.8 {
	padding-bottom : var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:\.9 {
	padding-bottom : var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:0 {
	padding-bottom : var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:1 {
	padding-bottom : var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:2 {
	padding-bottom : var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:3 {
	padding-bottom : var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:4 {
	padding-bottom : var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:5 {
	padding-bottom : var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:6 {
	padding-bottom : var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:7 {
	padding-bottom : var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:8 {
	padding-bottom : var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:9 {
	padding-bottom : var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-b\:10 {
	padding-bottom : var(--z10);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.1 {
	padding-left : var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.2 {
	padding-left : var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.3 {
	padding-left : var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.4 {
	padding-left : var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.5 {
	padding-left : var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.6 {
	padding-left : var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.7 {
	padding-left : var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.8 {
	padding-left : var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:\.9 {
	padding-left : var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:0 {
	padding-left : var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:1 {
	padding-left : var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:2 {
	padding-left : var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:3 {
	padding-left : var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:4 {
	padding-left : var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:5 {
	padding-left : var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:6 {
	padding-left : var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:7 {
	padding-left : var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:8 {
	padding-left : var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:9 {
	padding-left : var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-l\:10 {
	padding-left : var(--z10);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.1 {
	padding-right : var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.2 {
	padding-right : var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.3 {
	padding-right : var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.4 {
	padding-right : var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.5 {
	padding-right : var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.6 {
	padding-right : var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.7 {
	padding-right : var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.8 {
	padding-right : var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:\.9 {
	padding-right : var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:0 {
	padding-right : var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:1 {
	padding-right : var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:2 {
	padding-right : var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:3 {
	padding-right : var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:4 {
	padding-right : var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:5 {
	padding-right : var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:6 {
	padding-right : var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:7 {
	padding-right : var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:8 {
	padding-right : var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:9 {
	padding-right : var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-r\:10 {
	padding-right : var(--z10);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.1 {
	padding-left : var(--z-dot1);
	padding-right : var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.2 {
	padding-left : var(--z-dot2);
	padding-right : var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.3 {
	padding-left : var(--z-dot3);
	padding-right : var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.4 {
	padding-left : var(--z-dot4);
	padding-right : var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.5 {
	padding-left : var(--z-dot5);
	padding-right : var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.6 {
	padding-left : var(--z-dot6);
	padding-right : var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.7 {
	padding-left : var(--z-dot7);
	padding-right : var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.8 {
	padding-left : var(--z-dot8);
	padding-right : var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:\.9 {
	padding-left : var(--z-dot9);
	padding-right : var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:0 {
	padding-left : var(--z0);
	padding-right : var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:1 {
	padding-left : var(--z1);
	padding-right : var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:2 {
	padding-left : var(--z2);
	padding-right : var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:3 {
	padding-left : var(--z3);
	padding-right : var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:4 {
	padding-left : var(--z4);
	padding-right : var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:5 {
	padding-left : var(--z5);
	padding-right : var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:6 {
	padding-left : var(--z6);
	padding-right : var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:7 {
	padding-left : var(--z7);
	padding-right : var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:8 {
	padding-left : var(--z8);
	padding-right : var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:9 {
	padding-left : var(--z9);
	padding-right : var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-x\:10 {
	padding-left : var(--z10);
	padding-right : var(--z10);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.1 {
	padding-top : var(--z-dot1);
	padding-bottom : var(--z-dot1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.2 {
	padding-top : var(--z-dot2);
	padding-bottom : var(--z-dot2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.3 {
	padding-top : var(--z-dot3);
	padding-bottom : var(--z-dot3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.4 {
	padding-top : var(--z-dot4);
	padding-bottom : var(--z-dot4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.5 {
	padding-top : var(--z-dot5);
	padding-bottom : var(--z-dot5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.6 {
	padding-top : var(--z-dot6);
	padding-bottom : var(--z-dot6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.7 {
	padding-top : var(--z-dot7);
	padding-bottom : var(--z-dot7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.8 {
	padding-top : var(--z-dot8);
	padding-bottom : var(--z-dot8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:\.9 {
	padding-top : var(--z-dot9);
	padding-bottom : var(--z-dot9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:0 {
	padding-top : var(--z0);
	padding-bottom : var(--z0);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:1 {
	padding-top : var(--z1);
	padding-bottom : var(--z1);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:2 {
	padding-top : var(--z2);
	padding-bottom : var(--z2);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:3 {
	padding-top : var(--z3);
	padding-bottom : var(--z3);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:4 {
	padding-top : var(--z4);
	padding-bottom : var(--z4);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:5 {
	padding-top : var(--z5);
	padding-bottom : var(--z5);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:6 {
	padding-top : var(--z6);
	padding-bottom : var(--z6);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:7 {
	padding-top : var(--z7);
	padding-bottom : var(--z7);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:8 {
	padding-top : var(--z8);
	padding-bottom : var(--z8);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:9 {
	padding-top : var(--z9);
	padding-bottom : var(--z9);
}
/*---
							title: $(prop)
							section: Spacing
							---

							```html
							<div class=".$(short)-$(dir):$(z)">$(short)-$(dir):$(z)</span>
							```
						*/
.p-y\:10 {
	padding-top : var(--z10);
	padding-bottom : var(--z10);
}
@media(--mq-xxs) {
	.m\:a\@xxs {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@xxs {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@xxs {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@xxs {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@xxs {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@xxs {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@xxs {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@xxs {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@xxs {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@xxs {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@xxs {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@xxs {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@xxs {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@xxs {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@xxs {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@xxs {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@xxs {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@xxs {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@xxs {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@xxs {
		margin : var(--z0);
	}
	.m\:-0\@xxs {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@xxs {
		margin : var(--z1);
	}
	.m\:-1\@xxs {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@xxs {
		margin : var(--z2);
	}
	.m\:-2\@xxs {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@xxs {
		margin : var(--z3);
	}
	.m\:-3\@xxs {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@xxs {
		margin : var(--z4);
	}
	.m\:-4\@xxs {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@xxs {
		margin : var(--z5);
	}
	.m\:-5\@xxs {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@xxs {
		margin : var(--z6);
	}
	.m\:-6\@xxs {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@xxs {
		margin : var(--z7);
	}
	.m\:-7\@xxs {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@xxs {
		margin : var(--z8);
	}
	.m\:-8\@xxs {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@xxs {
		margin : var(--z9);
	}
	.m\:-9\@xxs {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@xxs {
		margin : var(--z10);
	}
	.m\:-10\@xxs {
		margin : -var(--z10);
	}
}
@media(--mq-xxs) {
	.m-t\:a\@xxs {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@xxs {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@xxs {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@xxs {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@xxs {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@xxs {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@xxs {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@xxs {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@xxs {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@xxs {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@xxs {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@xxs {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@xxs {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@xxs {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@xxs {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@xxs {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@xxs {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@xxs {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@xxs {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@xxs {
		margin-top : var(--z0);
	}
	.m-t\:-0\@xxs {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@xxs {
		margin-top : var(--z1);
	}
	.m-t\:-1\@xxs {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@xxs {
		margin-top : var(--z2);
	}
	.m-t\:-2\@xxs {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@xxs {
		margin-top : var(--z3);
	}
	.m-t\:-3\@xxs {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@xxs {
		margin-top : var(--z4);
	}
	.m-t\:-4\@xxs {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@xxs {
		margin-top : var(--z5);
	}
	.m-t\:-5\@xxs {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@xxs {
		margin-top : var(--z6);
	}
	.m-t\:-6\@xxs {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@xxs {
		margin-top : var(--z7);
	}
	.m-t\:-7\@xxs {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@xxs {
		margin-top : var(--z8);
	}
	.m-t\:-8\@xxs {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@xxs {
		margin-top : var(--z9);
	}
	.m-t\:-9\@xxs {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@xxs {
		margin-top : var(--z10);
	}
	.m-t\:-10\@xxs {
		margin-top : -var(--z10);
	}
}
@media(--mq-xxs) {
	.m-b\:a\@xxs {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@xxs {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@xxs {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@xxs {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@xxs {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@xxs {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@xxs {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@xxs {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@xxs {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@xxs {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@xxs {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@xxs {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@xxs {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@xxs {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@xxs {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@xxs {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@xxs {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@xxs {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@xxs {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@xxs {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@xxs {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@xxs {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@xxs {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@xxs {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@xxs {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@xxs {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@xxs {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@xxs {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@xxs {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@xxs {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@xxs {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@xxs {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@xxs {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@xxs {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@xxs {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@xxs {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@xxs {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@xxs {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@xxs {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@xxs {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@xxs {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-xxs) {
	.m-l\:a\@xxs {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@xxs {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@xxs {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@xxs {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@xxs {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@xxs {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@xxs {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@xxs {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@xxs {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@xxs {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@xxs {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@xxs {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@xxs {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@xxs {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@xxs {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@xxs {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@xxs {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@xxs {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@xxs {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@xxs {
		margin-left : var(--z0);
	}
	.m-l\:-0\@xxs {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@xxs {
		margin-left : var(--z1);
	}
	.m-l\:-1\@xxs {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@xxs {
		margin-left : var(--z2);
	}
	.m-l\:-2\@xxs {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@xxs {
		margin-left : var(--z3);
	}
	.m-l\:-3\@xxs {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@xxs {
		margin-left : var(--z4);
	}
	.m-l\:-4\@xxs {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@xxs {
		margin-left : var(--z5);
	}
	.m-l\:-5\@xxs {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@xxs {
		margin-left : var(--z6);
	}
	.m-l\:-6\@xxs {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@xxs {
		margin-left : var(--z7);
	}
	.m-l\:-7\@xxs {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@xxs {
		margin-left : var(--z8);
	}
	.m-l\:-8\@xxs {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@xxs {
		margin-left : var(--z9);
	}
	.m-l\:-9\@xxs {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@xxs {
		margin-left : var(--z10);
	}
	.m-l\:-10\@xxs {
		margin-left : -var(--z10);
	}
}
@media(--mq-xxs) {
	.m-r\:a\@xxs {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@xxs {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@xxs {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@xxs {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@xxs {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@xxs {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@xxs {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@xxs {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@xxs {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@xxs {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@xxs {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@xxs {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@xxs {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@xxs {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@xxs {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@xxs {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@xxs {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@xxs {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@xxs {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@xxs {
		margin-right : var(--z0);
	}
	.m-r\:-0\@xxs {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@xxs {
		margin-right : var(--z1);
	}
	.m-r\:-1\@xxs {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@xxs {
		margin-right : var(--z2);
	}
	.m-r\:-2\@xxs {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@xxs {
		margin-right : var(--z3);
	}
	.m-r\:-3\@xxs {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@xxs {
		margin-right : var(--z4);
	}
	.m-r\:-4\@xxs {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@xxs {
		margin-right : var(--z5);
	}
	.m-r\:-5\@xxs {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@xxs {
		margin-right : var(--z6);
	}
	.m-r\:-6\@xxs {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@xxs {
		margin-right : var(--z7);
	}
	.m-r\:-7\@xxs {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@xxs {
		margin-right : var(--z8);
	}
	.m-r\:-8\@xxs {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@xxs {
		margin-right : var(--z9);
	}
	.m-r\:-9\@xxs {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@xxs {
		margin-right : var(--z10);
	}
	.m-r\:-10\@xxs {
		margin-right : -var(--z10);
	}
}
@media(--mq-xxs) {
	.m-x\:a\@xxs {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@xxs {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@xxs {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@xxs {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@xxs {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@xxs {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@xxs {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@xxs {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@xxs {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@xxs {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@xxs {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@xxs {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@xxs {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@xxs {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@xxs {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@xxs {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@xxs {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@xxs {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@xxs {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@xxs {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@xxs {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-xxs) {
	.m-y\:a\@xxs {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@xxs {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@xxs {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@xxs {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@xxs {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@xxs {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@xxs {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@xxs {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@xxs {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@xxs {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@xxs {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@xxs {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@xxs {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@xxs {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@xxs {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@xxs {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@xxs {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@xxs {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@xxs {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@xxs {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@xxs {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@xxs {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@xxs {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@xxs {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@xxs {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@xxs {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@xxs {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@xxs {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@xxs {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@xxs {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@xxs {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@xxs {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@xxs {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@xxs {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@xxs {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@xxs {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@xxs {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@xxs {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@xxs {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@xxs {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@xxs {
		padding : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@xxs {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@xxs {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@xxs {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@xxs {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@xxs {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@xxs {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@xxs {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@xxs {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@xxs {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@xxs {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@xxs {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@xxs {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@xxs {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@xxs {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@xxs {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@xxs {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@xxs {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@xxs {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@xxs {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@xxs {
		padding-top : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@xxs {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@xxs {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@xxs {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@xxs {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@xxs {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@xxs {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@xxs {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@xxs {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@xxs {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@xxs {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@xxs {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@xxs {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@xxs {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@xxs {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@xxs {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@xxs {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@xxs {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@xxs {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@xxs {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@xxs {
		padding-bottom : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@xxs {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@xxs {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@xxs {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@xxs {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@xxs {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@xxs {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@xxs {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@xxs {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@xxs {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@xxs {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@xxs {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@xxs {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@xxs {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@xxs {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@xxs {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@xxs {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@xxs {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@xxs {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@xxs {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@xxs {
		padding-left : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@xxs {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@xxs {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@xxs {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@xxs {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@xxs {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@xxs {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@xxs {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@xxs {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@xxs {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@xxs {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@xxs {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@xxs {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@xxs {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@xxs {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@xxs {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@xxs {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@xxs {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@xxs {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@xxs {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@xxs {
		padding-right : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@xxs {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@xxs {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@xxs {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@xxs {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@xxs {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@xxs {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@xxs {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@xxs {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@xxs {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@xxs {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@xxs {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@xxs {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@xxs {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@xxs {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@xxs {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@xxs {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@xxs {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@xxs {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@xxs {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@xxs {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-xxs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@xxs {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@xxs {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@xxs {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@xxs {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@xxs {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@xxs {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@xxs {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@xxs {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@xxs {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@xxs {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@xxs {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@xxs {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@xxs {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@xxs {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@xxs {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@xxs {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@xxs {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@xxs {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@xxs {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@xxs {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
@media(--mq-xs) {
	.m\:a\@xs {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@xs {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@xs {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@xs {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@xs {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@xs {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@xs {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@xs {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@xs {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@xs {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@xs {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@xs {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@xs {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@xs {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@xs {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@xs {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@xs {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@xs {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@xs {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@xs {
		margin : var(--z0);
	}
	.m\:-0\@xs {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@xs {
		margin : var(--z1);
	}
	.m\:-1\@xs {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@xs {
		margin : var(--z2);
	}
	.m\:-2\@xs {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@xs {
		margin : var(--z3);
	}
	.m\:-3\@xs {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@xs {
		margin : var(--z4);
	}
	.m\:-4\@xs {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@xs {
		margin : var(--z5);
	}
	.m\:-5\@xs {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@xs {
		margin : var(--z6);
	}
	.m\:-6\@xs {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@xs {
		margin : var(--z7);
	}
	.m\:-7\@xs {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@xs {
		margin : var(--z8);
	}
	.m\:-8\@xs {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@xs {
		margin : var(--z9);
	}
	.m\:-9\@xs {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@xs {
		margin : var(--z10);
	}
	.m\:-10\@xs {
		margin : -var(--z10);
	}
}
@media(--mq-xs) {
	.m-t\:a\@xs {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@xs {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@xs {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@xs {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@xs {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@xs {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@xs {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@xs {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@xs {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@xs {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@xs {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@xs {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@xs {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@xs {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@xs {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@xs {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@xs {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@xs {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@xs {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@xs {
		margin-top : var(--z0);
	}
	.m-t\:-0\@xs {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@xs {
		margin-top : var(--z1);
	}
	.m-t\:-1\@xs {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@xs {
		margin-top : var(--z2);
	}
	.m-t\:-2\@xs {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@xs {
		margin-top : var(--z3);
	}
	.m-t\:-3\@xs {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@xs {
		margin-top : var(--z4);
	}
	.m-t\:-4\@xs {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@xs {
		margin-top : var(--z5);
	}
	.m-t\:-5\@xs {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@xs {
		margin-top : var(--z6);
	}
	.m-t\:-6\@xs {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@xs {
		margin-top : var(--z7);
	}
	.m-t\:-7\@xs {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@xs {
		margin-top : var(--z8);
	}
	.m-t\:-8\@xs {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@xs {
		margin-top : var(--z9);
	}
	.m-t\:-9\@xs {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@xs {
		margin-top : var(--z10);
	}
	.m-t\:-10\@xs {
		margin-top : -var(--z10);
	}
}
@media(--mq-xs) {
	.m-b\:a\@xs {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@xs {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@xs {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@xs {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@xs {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@xs {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@xs {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@xs {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@xs {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@xs {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@xs {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@xs {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@xs {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@xs {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@xs {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@xs {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@xs {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@xs {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@xs {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@xs {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@xs {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@xs {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@xs {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@xs {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@xs {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@xs {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@xs {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@xs {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@xs {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@xs {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@xs {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@xs {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@xs {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@xs {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@xs {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@xs {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@xs {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@xs {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@xs {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@xs {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@xs {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-xs) {
	.m-l\:a\@xs {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@xs {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@xs {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@xs {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@xs {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@xs {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@xs {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@xs {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@xs {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@xs {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@xs {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@xs {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@xs {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@xs {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@xs {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@xs {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@xs {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@xs {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@xs {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@xs {
		margin-left : var(--z0);
	}
	.m-l\:-0\@xs {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@xs {
		margin-left : var(--z1);
	}
	.m-l\:-1\@xs {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@xs {
		margin-left : var(--z2);
	}
	.m-l\:-2\@xs {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@xs {
		margin-left : var(--z3);
	}
	.m-l\:-3\@xs {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@xs {
		margin-left : var(--z4);
	}
	.m-l\:-4\@xs {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@xs {
		margin-left : var(--z5);
	}
	.m-l\:-5\@xs {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@xs {
		margin-left : var(--z6);
	}
	.m-l\:-6\@xs {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@xs {
		margin-left : var(--z7);
	}
	.m-l\:-7\@xs {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@xs {
		margin-left : var(--z8);
	}
	.m-l\:-8\@xs {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@xs {
		margin-left : var(--z9);
	}
	.m-l\:-9\@xs {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@xs {
		margin-left : var(--z10);
	}
	.m-l\:-10\@xs {
		margin-left : -var(--z10);
	}
}
@media(--mq-xs) {
	.m-r\:a\@xs {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@xs {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@xs {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@xs {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@xs {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@xs {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@xs {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@xs {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@xs {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@xs {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@xs {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@xs {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@xs {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@xs {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@xs {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@xs {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@xs {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@xs {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@xs {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@xs {
		margin-right : var(--z0);
	}
	.m-r\:-0\@xs {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@xs {
		margin-right : var(--z1);
	}
	.m-r\:-1\@xs {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@xs {
		margin-right : var(--z2);
	}
	.m-r\:-2\@xs {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@xs {
		margin-right : var(--z3);
	}
	.m-r\:-3\@xs {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@xs {
		margin-right : var(--z4);
	}
	.m-r\:-4\@xs {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@xs {
		margin-right : var(--z5);
	}
	.m-r\:-5\@xs {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@xs {
		margin-right : var(--z6);
	}
	.m-r\:-6\@xs {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@xs {
		margin-right : var(--z7);
	}
	.m-r\:-7\@xs {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@xs {
		margin-right : var(--z8);
	}
	.m-r\:-8\@xs {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@xs {
		margin-right : var(--z9);
	}
	.m-r\:-9\@xs {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@xs {
		margin-right : var(--z10);
	}
	.m-r\:-10\@xs {
		margin-right : -var(--z10);
	}
}
@media(--mq-xs) {
	.m-x\:a\@xs {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@xs {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@xs {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@xs {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@xs {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@xs {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@xs {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@xs {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@xs {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@xs {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@xs {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@xs {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@xs {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@xs {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@xs {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@xs {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@xs {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@xs {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@xs {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@xs {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@xs {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-xs) {
	.m-y\:a\@xs {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@xs {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@xs {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@xs {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@xs {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@xs {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@xs {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@xs {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@xs {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@xs {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@xs {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@xs {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@xs {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@xs {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@xs {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@xs {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@xs {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@xs {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@xs {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@xs {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@xs {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@xs {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@xs {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@xs {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@xs {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@xs {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@xs {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@xs {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@xs {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@xs {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@xs {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@xs {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@xs {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@xs {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@xs {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@xs {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@xs {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@xs {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@xs {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@xs {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@xs {
		padding : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@xs {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@xs {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@xs {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@xs {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@xs {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@xs {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@xs {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@xs {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@xs {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@xs {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@xs {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@xs {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@xs {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@xs {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@xs {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@xs {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@xs {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@xs {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@xs {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@xs {
		padding-top : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@xs {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@xs {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@xs {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@xs {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@xs {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@xs {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@xs {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@xs {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@xs {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@xs {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@xs {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@xs {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@xs {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@xs {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@xs {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@xs {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@xs {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@xs {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@xs {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@xs {
		padding-bottom : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@xs {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@xs {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@xs {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@xs {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@xs {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@xs {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@xs {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@xs {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@xs {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@xs {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@xs {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@xs {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@xs {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@xs {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@xs {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@xs {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@xs {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@xs {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@xs {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@xs {
		padding-left : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@xs {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@xs {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@xs {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@xs {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@xs {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@xs {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@xs {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@xs {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@xs {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@xs {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@xs {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@xs {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@xs {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@xs {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@xs {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@xs {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@xs {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@xs {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@xs {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@xs {
		padding-right : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@xs {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@xs {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@xs {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@xs {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@xs {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@xs {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@xs {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@xs {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@xs {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@xs {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@xs {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@xs {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@xs {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@xs {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@xs {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@xs {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@xs {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@xs {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@xs {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@xs {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-xs) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@xs {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@xs {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@xs {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@xs {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@xs {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@xs {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@xs {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@xs {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@xs {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@xs {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@xs {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@xs {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@xs {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@xs {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@xs {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@xs {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@xs {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@xs {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@xs {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@xs {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
@media(--mq-sm) {
	.m\:a\@sm {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@sm {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@sm {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@sm {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@sm {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@sm {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@sm {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@sm {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@sm {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@sm {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@sm {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@sm {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@sm {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@sm {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@sm {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@sm {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@sm {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@sm {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@sm {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@sm {
		margin : var(--z0);
	}
	.m\:-0\@sm {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@sm {
		margin : var(--z1);
	}
	.m\:-1\@sm {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@sm {
		margin : var(--z2);
	}
	.m\:-2\@sm {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@sm {
		margin : var(--z3);
	}
	.m\:-3\@sm {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@sm {
		margin : var(--z4);
	}
	.m\:-4\@sm {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@sm {
		margin : var(--z5);
	}
	.m\:-5\@sm {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@sm {
		margin : var(--z6);
	}
	.m\:-6\@sm {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@sm {
		margin : var(--z7);
	}
	.m\:-7\@sm {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@sm {
		margin : var(--z8);
	}
	.m\:-8\@sm {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@sm {
		margin : var(--z9);
	}
	.m\:-9\@sm {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@sm {
		margin : var(--z10);
	}
	.m\:-10\@sm {
		margin : -var(--z10);
	}
}
@media(--mq-sm) {
	.m-t\:a\@sm {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@sm {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@sm {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@sm {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@sm {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@sm {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@sm {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@sm {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@sm {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@sm {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@sm {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@sm {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@sm {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@sm {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@sm {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@sm {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@sm {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@sm {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@sm {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@sm {
		margin-top : var(--z0);
	}
	.m-t\:-0\@sm {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@sm {
		margin-top : var(--z1);
	}
	.m-t\:-1\@sm {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@sm {
		margin-top : var(--z2);
	}
	.m-t\:-2\@sm {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@sm {
		margin-top : var(--z3);
	}
	.m-t\:-3\@sm {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@sm {
		margin-top : var(--z4);
	}
	.m-t\:-4\@sm {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@sm {
		margin-top : var(--z5);
	}
	.m-t\:-5\@sm {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@sm {
		margin-top : var(--z6);
	}
	.m-t\:-6\@sm {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@sm {
		margin-top : var(--z7);
	}
	.m-t\:-7\@sm {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@sm {
		margin-top : var(--z8);
	}
	.m-t\:-8\@sm {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@sm {
		margin-top : var(--z9);
	}
	.m-t\:-9\@sm {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@sm {
		margin-top : var(--z10);
	}
	.m-t\:-10\@sm {
		margin-top : -var(--z10);
	}
}
@media(--mq-sm) {
	.m-b\:a\@sm {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@sm {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@sm {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@sm {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@sm {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@sm {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@sm {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@sm {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@sm {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@sm {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@sm {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@sm {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@sm {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@sm {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@sm {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@sm {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@sm {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@sm {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@sm {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@sm {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@sm {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@sm {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@sm {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@sm {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@sm {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@sm {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@sm {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@sm {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@sm {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@sm {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@sm {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@sm {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@sm {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@sm {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@sm {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@sm {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@sm {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@sm {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@sm {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@sm {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@sm {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-sm) {
	.m-l\:a\@sm {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@sm {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@sm {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@sm {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@sm {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@sm {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@sm {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@sm {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@sm {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@sm {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@sm {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@sm {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@sm {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@sm {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@sm {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@sm {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@sm {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@sm {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@sm {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@sm {
		margin-left : var(--z0);
	}
	.m-l\:-0\@sm {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@sm {
		margin-left : var(--z1);
	}
	.m-l\:-1\@sm {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@sm {
		margin-left : var(--z2);
	}
	.m-l\:-2\@sm {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@sm {
		margin-left : var(--z3);
	}
	.m-l\:-3\@sm {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@sm {
		margin-left : var(--z4);
	}
	.m-l\:-4\@sm {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@sm {
		margin-left : var(--z5);
	}
	.m-l\:-5\@sm {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@sm {
		margin-left : var(--z6);
	}
	.m-l\:-6\@sm {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@sm {
		margin-left : var(--z7);
	}
	.m-l\:-7\@sm {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@sm {
		margin-left : var(--z8);
	}
	.m-l\:-8\@sm {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@sm {
		margin-left : var(--z9);
	}
	.m-l\:-9\@sm {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@sm {
		margin-left : var(--z10);
	}
	.m-l\:-10\@sm {
		margin-left : -var(--z10);
	}
}
@media(--mq-sm) {
	.m-r\:a\@sm {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@sm {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@sm {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@sm {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@sm {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@sm {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@sm {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@sm {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@sm {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@sm {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@sm {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@sm {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@sm {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@sm {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@sm {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@sm {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@sm {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@sm {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@sm {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@sm {
		margin-right : var(--z0);
	}
	.m-r\:-0\@sm {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@sm {
		margin-right : var(--z1);
	}
	.m-r\:-1\@sm {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@sm {
		margin-right : var(--z2);
	}
	.m-r\:-2\@sm {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@sm {
		margin-right : var(--z3);
	}
	.m-r\:-3\@sm {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@sm {
		margin-right : var(--z4);
	}
	.m-r\:-4\@sm {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@sm {
		margin-right : var(--z5);
	}
	.m-r\:-5\@sm {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@sm {
		margin-right : var(--z6);
	}
	.m-r\:-6\@sm {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@sm {
		margin-right : var(--z7);
	}
	.m-r\:-7\@sm {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@sm {
		margin-right : var(--z8);
	}
	.m-r\:-8\@sm {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@sm {
		margin-right : var(--z9);
	}
	.m-r\:-9\@sm {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@sm {
		margin-right : var(--z10);
	}
	.m-r\:-10\@sm {
		margin-right : -var(--z10);
	}
}
@media(--mq-sm) {
	.m-x\:a\@sm {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@sm {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@sm {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@sm {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@sm {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@sm {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@sm {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@sm {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@sm {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@sm {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@sm {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@sm {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@sm {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@sm {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@sm {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@sm {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@sm {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@sm {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@sm {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@sm {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@sm {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-sm) {
	.m-y\:a\@sm {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@sm {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@sm {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@sm {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@sm {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@sm {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@sm {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@sm {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@sm {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@sm {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@sm {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@sm {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@sm {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@sm {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@sm {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@sm {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@sm {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@sm {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@sm {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@sm {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@sm {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@sm {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@sm {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@sm {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@sm {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@sm {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@sm {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@sm {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@sm {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@sm {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@sm {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@sm {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@sm {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@sm {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@sm {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@sm {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@sm {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@sm {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@sm {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@sm {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@sm {
		padding : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@sm {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@sm {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@sm {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@sm {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@sm {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@sm {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@sm {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@sm {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@sm {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@sm {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@sm {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@sm {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@sm {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@sm {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@sm {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@sm {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@sm {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@sm {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@sm {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@sm {
		padding-top : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@sm {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@sm {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@sm {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@sm {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@sm {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@sm {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@sm {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@sm {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@sm {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@sm {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@sm {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@sm {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@sm {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@sm {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@sm {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@sm {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@sm {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@sm {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@sm {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@sm {
		padding-bottom : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@sm {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@sm {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@sm {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@sm {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@sm {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@sm {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@sm {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@sm {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@sm {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@sm {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@sm {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@sm {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@sm {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@sm {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@sm {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@sm {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@sm {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@sm {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@sm {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@sm {
		padding-left : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@sm {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@sm {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@sm {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@sm {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@sm {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@sm {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@sm {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@sm {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@sm {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@sm {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@sm {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@sm {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@sm {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@sm {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@sm {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@sm {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@sm {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@sm {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@sm {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@sm {
		padding-right : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@sm {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@sm {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@sm {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@sm {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@sm {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@sm {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@sm {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@sm {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@sm {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@sm {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@sm {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@sm {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@sm {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@sm {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@sm {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@sm {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@sm {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@sm {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@sm {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@sm {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-sm) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@sm {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@sm {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@sm {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@sm {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@sm {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@sm {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@sm {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@sm {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@sm {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@sm {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@sm {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@sm {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@sm {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@sm {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@sm {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@sm {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@sm {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@sm {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@sm {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@sm {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
@media(--mq-md) {
	.m\:a\@md {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@md {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@md {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@md {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@md {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@md {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@md {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@md {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@md {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@md {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@md {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@md {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@md {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@md {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@md {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@md {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@md {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@md {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@md {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@md {
		margin : var(--z0);
	}
	.m\:-0\@md {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@md {
		margin : var(--z1);
	}
	.m\:-1\@md {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@md {
		margin : var(--z2);
	}
	.m\:-2\@md {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@md {
		margin : var(--z3);
	}
	.m\:-3\@md {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@md {
		margin : var(--z4);
	}
	.m\:-4\@md {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@md {
		margin : var(--z5);
	}
	.m\:-5\@md {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@md {
		margin : var(--z6);
	}
	.m\:-6\@md {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@md {
		margin : var(--z7);
	}
	.m\:-7\@md {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@md {
		margin : var(--z8);
	}
	.m\:-8\@md {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@md {
		margin : var(--z9);
	}
	.m\:-9\@md {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@md {
		margin : var(--z10);
	}
	.m\:-10\@md {
		margin : -var(--z10);
	}
}
@media(--mq-md) {
	.m-t\:a\@md {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@md {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@md {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@md {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@md {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@md {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@md {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@md {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@md {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@md {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@md {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@md {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@md {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@md {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@md {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@md {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@md {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@md {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@md {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@md {
		margin-top : var(--z0);
	}
	.m-t\:-0\@md {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@md {
		margin-top : var(--z1);
	}
	.m-t\:-1\@md {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@md {
		margin-top : var(--z2);
	}
	.m-t\:-2\@md {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@md {
		margin-top : var(--z3);
	}
	.m-t\:-3\@md {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@md {
		margin-top : var(--z4);
	}
	.m-t\:-4\@md {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@md {
		margin-top : var(--z5);
	}
	.m-t\:-5\@md {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@md {
		margin-top : var(--z6);
	}
	.m-t\:-6\@md {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@md {
		margin-top : var(--z7);
	}
	.m-t\:-7\@md {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@md {
		margin-top : var(--z8);
	}
	.m-t\:-8\@md {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@md {
		margin-top : var(--z9);
	}
	.m-t\:-9\@md {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@md {
		margin-top : var(--z10);
	}
	.m-t\:-10\@md {
		margin-top : -var(--z10);
	}
}
@media(--mq-md) {
	.m-b\:a\@md {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@md {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@md {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@md {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@md {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@md {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@md {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@md {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@md {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@md {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@md {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@md {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@md {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@md {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@md {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@md {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@md {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@md {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@md {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@md {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@md {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@md {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@md {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@md {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@md {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@md {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@md {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@md {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@md {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@md {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@md {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@md {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@md {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@md {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@md {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@md {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@md {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@md {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@md {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@md {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@md {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-md) {
	.m-l\:a\@md {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@md {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@md {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@md {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@md {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@md {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@md {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@md {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@md {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@md {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@md {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@md {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@md {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@md {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@md {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@md {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@md {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@md {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@md {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@md {
		margin-left : var(--z0);
	}
	.m-l\:-0\@md {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@md {
		margin-left : var(--z1);
	}
	.m-l\:-1\@md {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@md {
		margin-left : var(--z2);
	}
	.m-l\:-2\@md {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@md {
		margin-left : var(--z3);
	}
	.m-l\:-3\@md {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@md {
		margin-left : var(--z4);
	}
	.m-l\:-4\@md {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@md {
		margin-left : var(--z5);
	}
	.m-l\:-5\@md {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@md {
		margin-left : var(--z6);
	}
	.m-l\:-6\@md {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@md {
		margin-left : var(--z7);
	}
	.m-l\:-7\@md {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@md {
		margin-left : var(--z8);
	}
	.m-l\:-8\@md {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@md {
		margin-left : var(--z9);
	}
	.m-l\:-9\@md {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@md {
		margin-left : var(--z10);
	}
	.m-l\:-10\@md {
		margin-left : -var(--z10);
	}
}
@media(--mq-md) {
	.m-r\:a\@md {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@md {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@md {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@md {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@md {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@md {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@md {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@md {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@md {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@md {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@md {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@md {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@md {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@md {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@md {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@md {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@md {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@md {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@md {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@md {
		margin-right : var(--z0);
	}
	.m-r\:-0\@md {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@md {
		margin-right : var(--z1);
	}
	.m-r\:-1\@md {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@md {
		margin-right : var(--z2);
	}
	.m-r\:-2\@md {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@md {
		margin-right : var(--z3);
	}
	.m-r\:-3\@md {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@md {
		margin-right : var(--z4);
	}
	.m-r\:-4\@md {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@md {
		margin-right : var(--z5);
	}
	.m-r\:-5\@md {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@md {
		margin-right : var(--z6);
	}
	.m-r\:-6\@md {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@md {
		margin-right : var(--z7);
	}
	.m-r\:-7\@md {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@md {
		margin-right : var(--z8);
	}
	.m-r\:-8\@md {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@md {
		margin-right : var(--z9);
	}
	.m-r\:-9\@md {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@md {
		margin-right : var(--z10);
	}
	.m-r\:-10\@md {
		margin-right : -var(--z10);
	}
}
@media(--mq-md) {
	.m-x\:a\@md {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@md {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@md {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@md {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@md {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@md {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@md {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@md {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@md {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@md {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@md {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@md {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@md {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@md {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@md {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@md {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@md {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@md {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@md {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@md {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@md {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-md) {
	.m-y\:a\@md {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@md {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@md {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@md {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@md {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@md {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@md {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@md {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@md {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@md {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@md {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@md {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@md {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@md {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@md {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@md {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@md {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@md {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@md {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@md {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@md {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@md {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@md {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@md {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@md {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@md {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@md {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@md {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@md {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@md {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@md {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@md {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@md {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@md {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@md {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@md {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@md {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@md {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@md {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@md {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@md {
		padding : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@md {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@md {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@md {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@md {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@md {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@md {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@md {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@md {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@md {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@md {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@md {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@md {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@md {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@md {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@md {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@md {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@md {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@md {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@md {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@md {
		padding-top : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@md {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@md {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@md {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@md {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@md {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@md {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@md {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@md {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@md {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@md {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@md {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@md {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@md {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@md {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@md {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@md {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@md {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@md {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@md {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@md {
		padding-bottom : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@md {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@md {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@md {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@md {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@md {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@md {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@md {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@md {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@md {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@md {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@md {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@md {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@md {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@md {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@md {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@md {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@md {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@md {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@md {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@md {
		padding-left : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@md {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@md {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@md {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@md {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@md {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@md {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@md {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@md {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@md {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@md {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@md {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@md {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@md {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@md {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@md {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@md {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@md {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@md {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@md {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@md {
		padding-right : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@md {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@md {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@md {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@md {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@md {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@md {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@md {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@md {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@md {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@md {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@md {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@md {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@md {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@md {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@md {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@md {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@md {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@md {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@md {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@md {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-md) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@md {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@md {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@md {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@md {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@md {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@md {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@md {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@md {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@md {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@md {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@md {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@md {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@md {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@md {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@md {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@md {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@md {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@md {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@md {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@md {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
@media(--mq-lg) {
	.m\:a\@lg {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@lg {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@lg {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@lg {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@lg {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@lg {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@lg {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@lg {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@lg {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@lg {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@lg {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@lg {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@lg {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@lg {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@lg {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@lg {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@lg {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@lg {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@lg {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@lg {
		margin : var(--z0);
	}
	.m\:-0\@lg {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@lg {
		margin : var(--z1);
	}
	.m\:-1\@lg {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@lg {
		margin : var(--z2);
	}
	.m\:-2\@lg {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@lg {
		margin : var(--z3);
	}
	.m\:-3\@lg {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@lg {
		margin : var(--z4);
	}
	.m\:-4\@lg {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@lg {
		margin : var(--z5);
	}
	.m\:-5\@lg {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@lg {
		margin : var(--z6);
	}
	.m\:-6\@lg {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@lg {
		margin : var(--z7);
	}
	.m\:-7\@lg {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@lg {
		margin : var(--z8);
	}
	.m\:-8\@lg {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@lg {
		margin : var(--z9);
	}
	.m\:-9\@lg {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@lg {
		margin : var(--z10);
	}
	.m\:-10\@lg {
		margin : -var(--z10);
	}
}
@media(--mq-lg) {
	.m-t\:a\@lg {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@lg {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@lg {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@lg {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@lg {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@lg {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@lg {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@lg {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@lg {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@lg {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@lg {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@lg {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@lg {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@lg {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@lg {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@lg {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@lg {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@lg {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@lg {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@lg {
		margin-top : var(--z0);
	}
	.m-t\:-0\@lg {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@lg {
		margin-top : var(--z1);
	}
	.m-t\:-1\@lg {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@lg {
		margin-top : var(--z2);
	}
	.m-t\:-2\@lg {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@lg {
		margin-top : var(--z3);
	}
	.m-t\:-3\@lg {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@lg {
		margin-top : var(--z4);
	}
	.m-t\:-4\@lg {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@lg {
		margin-top : var(--z5);
	}
	.m-t\:-5\@lg {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@lg {
		margin-top : var(--z6);
	}
	.m-t\:-6\@lg {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@lg {
		margin-top : var(--z7);
	}
	.m-t\:-7\@lg {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@lg {
		margin-top : var(--z8);
	}
	.m-t\:-8\@lg {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@lg {
		margin-top : var(--z9);
	}
	.m-t\:-9\@lg {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@lg {
		margin-top : var(--z10);
	}
	.m-t\:-10\@lg {
		margin-top : -var(--z10);
	}
}
@media(--mq-lg) {
	.m-b\:a\@lg {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@lg {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@lg {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@lg {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@lg {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@lg {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@lg {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@lg {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@lg {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@lg {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@lg {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@lg {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@lg {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@lg {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@lg {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@lg {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@lg {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@lg {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@lg {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@lg {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@lg {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@lg {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@lg {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@lg {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@lg {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@lg {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@lg {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@lg {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@lg {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@lg {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@lg {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@lg {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@lg {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@lg {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@lg {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@lg {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@lg {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@lg {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@lg {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@lg {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@lg {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-lg) {
	.m-l\:a\@lg {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@lg {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@lg {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@lg {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@lg {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@lg {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@lg {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@lg {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@lg {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@lg {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@lg {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@lg {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@lg {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@lg {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@lg {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@lg {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@lg {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@lg {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@lg {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@lg {
		margin-left : var(--z0);
	}
	.m-l\:-0\@lg {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@lg {
		margin-left : var(--z1);
	}
	.m-l\:-1\@lg {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@lg {
		margin-left : var(--z2);
	}
	.m-l\:-2\@lg {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@lg {
		margin-left : var(--z3);
	}
	.m-l\:-3\@lg {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@lg {
		margin-left : var(--z4);
	}
	.m-l\:-4\@lg {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@lg {
		margin-left : var(--z5);
	}
	.m-l\:-5\@lg {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@lg {
		margin-left : var(--z6);
	}
	.m-l\:-6\@lg {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@lg {
		margin-left : var(--z7);
	}
	.m-l\:-7\@lg {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@lg {
		margin-left : var(--z8);
	}
	.m-l\:-8\@lg {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@lg {
		margin-left : var(--z9);
	}
	.m-l\:-9\@lg {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@lg {
		margin-left : var(--z10);
	}
	.m-l\:-10\@lg {
		margin-left : -var(--z10);
	}
}
@media(--mq-lg) {
	.m-r\:a\@lg {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@lg {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@lg {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@lg {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@lg {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@lg {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@lg {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@lg {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@lg {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@lg {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@lg {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@lg {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@lg {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@lg {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@lg {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@lg {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@lg {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@lg {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@lg {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@lg {
		margin-right : var(--z0);
	}
	.m-r\:-0\@lg {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@lg {
		margin-right : var(--z1);
	}
	.m-r\:-1\@lg {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@lg {
		margin-right : var(--z2);
	}
	.m-r\:-2\@lg {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@lg {
		margin-right : var(--z3);
	}
	.m-r\:-3\@lg {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@lg {
		margin-right : var(--z4);
	}
	.m-r\:-4\@lg {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@lg {
		margin-right : var(--z5);
	}
	.m-r\:-5\@lg {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@lg {
		margin-right : var(--z6);
	}
	.m-r\:-6\@lg {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@lg {
		margin-right : var(--z7);
	}
	.m-r\:-7\@lg {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@lg {
		margin-right : var(--z8);
	}
	.m-r\:-8\@lg {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@lg {
		margin-right : var(--z9);
	}
	.m-r\:-9\@lg {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@lg {
		margin-right : var(--z10);
	}
	.m-r\:-10\@lg {
		margin-right : -var(--z10);
	}
}
@media(--mq-lg) {
	.m-x\:a\@lg {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@lg {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@lg {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@lg {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@lg {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@lg {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@lg {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@lg {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@lg {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@lg {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@lg {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@lg {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@lg {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@lg {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@lg {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@lg {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@lg {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@lg {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@lg {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@lg {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@lg {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-lg) {
	.m-y\:a\@lg {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@lg {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@lg {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@lg {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@lg {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@lg {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@lg {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@lg {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@lg {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@lg {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@lg {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@lg {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@lg {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@lg {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@lg {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@lg {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@lg {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@lg {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@lg {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@lg {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@lg {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@lg {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@lg {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@lg {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@lg {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@lg {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@lg {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@lg {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@lg {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@lg {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@lg {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@lg {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@lg {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@lg {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@lg {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@lg {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@lg {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@lg {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@lg {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@lg {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@lg {
		padding : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@lg {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@lg {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@lg {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@lg {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@lg {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@lg {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@lg {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@lg {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@lg {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@lg {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@lg {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@lg {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@lg {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@lg {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@lg {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@lg {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@lg {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@lg {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@lg {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@lg {
		padding-top : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@lg {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@lg {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@lg {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@lg {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@lg {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@lg {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@lg {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@lg {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@lg {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@lg {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@lg {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@lg {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@lg {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@lg {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@lg {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@lg {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@lg {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@lg {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@lg {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@lg {
		padding-bottom : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@lg {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@lg {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@lg {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@lg {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@lg {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@lg {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@lg {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@lg {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@lg {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@lg {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@lg {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@lg {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@lg {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@lg {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@lg {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@lg {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@lg {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@lg {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@lg {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@lg {
		padding-left : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@lg {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@lg {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@lg {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@lg {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@lg {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@lg {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@lg {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@lg {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@lg {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@lg {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@lg {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@lg {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@lg {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@lg {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@lg {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@lg {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@lg {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@lg {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@lg {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@lg {
		padding-right : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@lg {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@lg {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@lg {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@lg {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@lg {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@lg {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@lg {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@lg {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@lg {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@lg {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@lg {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@lg {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@lg {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@lg {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@lg {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@lg {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@lg {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@lg {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@lg {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@lg {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-lg) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@lg {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@lg {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@lg {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@lg {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@lg {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@lg {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@lg {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@lg {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@lg {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@lg {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@lg {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@lg {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@lg {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@lg {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@lg {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@lg {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@lg {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@lg {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@lg {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@lg {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
@media(--mq-xl) {
	.m\:a\@xl {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@xl {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@xl {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@xl {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@xl {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@xl {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@xl {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@xl {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@xl {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@xl {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@xl {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@xl {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@xl {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@xl {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@xl {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@xl {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@xl {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@xl {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@xl {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@xl {
		margin : var(--z0);
	}
	.m\:-0\@xl {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@xl {
		margin : var(--z1);
	}
	.m\:-1\@xl {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@xl {
		margin : var(--z2);
	}
	.m\:-2\@xl {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@xl {
		margin : var(--z3);
	}
	.m\:-3\@xl {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@xl {
		margin : var(--z4);
	}
	.m\:-4\@xl {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@xl {
		margin : var(--z5);
	}
	.m\:-5\@xl {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@xl {
		margin : var(--z6);
	}
	.m\:-6\@xl {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@xl {
		margin : var(--z7);
	}
	.m\:-7\@xl {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@xl {
		margin : var(--z8);
	}
	.m\:-8\@xl {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@xl {
		margin : var(--z9);
	}
	.m\:-9\@xl {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@xl {
		margin : var(--z10);
	}
	.m\:-10\@xl {
		margin : -var(--z10);
	}
}
@media(--mq-xl) {
	.m-t\:a\@xl {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@xl {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@xl {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@xl {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@xl {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@xl {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@xl {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@xl {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@xl {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@xl {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@xl {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@xl {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@xl {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@xl {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@xl {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@xl {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@xl {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@xl {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@xl {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@xl {
		margin-top : var(--z0);
	}
	.m-t\:-0\@xl {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@xl {
		margin-top : var(--z1);
	}
	.m-t\:-1\@xl {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@xl {
		margin-top : var(--z2);
	}
	.m-t\:-2\@xl {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@xl {
		margin-top : var(--z3);
	}
	.m-t\:-3\@xl {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@xl {
		margin-top : var(--z4);
	}
	.m-t\:-4\@xl {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@xl {
		margin-top : var(--z5);
	}
	.m-t\:-5\@xl {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@xl {
		margin-top : var(--z6);
	}
	.m-t\:-6\@xl {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@xl {
		margin-top : var(--z7);
	}
	.m-t\:-7\@xl {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@xl {
		margin-top : var(--z8);
	}
	.m-t\:-8\@xl {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@xl {
		margin-top : var(--z9);
	}
	.m-t\:-9\@xl {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@xl {
		margin-top : var(--z10);
	}
	.m-t\:-10\@xl {
		margin-top : -var(--z10);
	}
}
@media(--mq-xl) {
	.m-b\:a\@xl {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@xl {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@xl {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@xl {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@xl {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@xl {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@xl {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@xl {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@xl {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@xl {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@xl {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@xl {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@xl {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@xl {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@xl {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@xl {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@xl {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@xl {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@xl {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@xl {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@xl {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@xl {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@xl {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@xl {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@xl {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@xl {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@xl {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@xl {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@xl {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@xl {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@xl {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@xl {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@xl {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@xl {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@xl {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@xl {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@xl {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@xl {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@xl {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@xl {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@xl {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-xl) {
	.m-l\:a\@xl {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@xl {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@xl {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@xl {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@xl {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@xl {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@xl {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@xl {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@xl {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@xl {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@xl {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@xl {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@xl {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@xl {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@xl {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@xl {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@xl {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@xl {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@xl {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@xl {
		margin-left : var(--z0);
	}
	.m-l\:-0\@xl {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@xl {
		margin-left : var(--z1);
	}
	.m-l\:-1\@xl {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@xl {
		margin-left : var(--z2);
	}
	.m-l\:-2\@xl {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@xl {
		margin-left : var(--z3);
	}
	.m-l\:-3\@xl {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@xl {
		margin-left : var(--z4);
	}
	.m-l\:-4\@xl {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@xl {
		margin-left : var(--z5);
	}
	.m-l\:-5\@xl {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@xl {
		margin-left : var(--z6);
	}
	.m-l\:-6\@xl {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@xl {
		margin-left : var(--z7);
	}
	.m-l\:-7\@xl {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@xl {
		margin-left : var(--z8);
	}
	.m-l\:-8\@xl {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@xl {
		margin-left : var(--z9);
	}
	.m-l\:-9\@xl {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@xl {
		margin-left : var(--z10);
	}
	.m-l\:-10\@xl {
		margin-left : -var(--z10);
	}
}
@media(--mq-xl) {
	.m-r\:a\@xl {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@xl {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@xl {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@xl {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@xl {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@xl {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@xl {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@xl {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@xl {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@xl {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@xl {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@xl {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@xl {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@xl {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@xl {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@xl {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@xl {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@xl {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@xl {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@xl {
		margin-right : var(--z0);
	}
	.m-r\:-0\@xl {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@xl {
		margin-right : var(--z1);
	}
	.m-r\:-1\@xl {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@xl {
		margin-right : var(--z2);
	}
	.m-r\:-2\@xl {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@xl {
		margin-right : var(--z3);
	}
	.m-r\:-3\@xl {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@xl {
		margin-right : var(--z4);
	}
	.m-r\:-4\@xl {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@xl {
		margin-right : var(--z5);
	}
	.m-r\:-5\@xl {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@xl {
		margin-right : var(--z6);
	}
	.m-r\:-6\@xl {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@xl {
		margin-right : var(--z7);
	}
	.m-r\:-7\@xl {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@xl {
		margin-right : var(--z8);
	}
	.m-r\:-8\@xl {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@xl {
		margin-right : var(--z9);
	}
	.m-r\:-9\@xl {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@xl {
		margin-right : var(--z10);
	}
	.m-r\:-10\@xl {
		margin-right : -var(--z10);
	}
}
@media(--mq-xl) {
	.m-x\:a\@xl {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@xl {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@xl {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@xl {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@xl {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@xl {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@xl {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@xl {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@xl {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@xl {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@xl {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@xl {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@xl {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@xl {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@xl {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@xl {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@xl {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@xl {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@xl {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@xl {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@xl {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-xl) {
	.m-y\:a\@xl {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@xl {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@xl {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@xl {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@xl {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@xl {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@xl {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@xl {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@xl {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@xl {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@xl {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@xl {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@xl {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@xl {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@xl {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@xl {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@xl {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@xl {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@xl {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@xl {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@xl {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@xl {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@xl {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@xl {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@xl {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@xl {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@xl {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@xl {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@xl {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@xl {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@xl {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@xl {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@xl {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@xl {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@xl {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@xl {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@xl {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@xl {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@xl {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@xl {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@xl {
		padding : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@xl {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@xl {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@xl {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@xl {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@xl {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@xl {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@xl {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@xl {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@xl {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@xl {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@xl {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@xl {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@xl {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@xl {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@xl {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@xl {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@xl {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@xl {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@xl {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@xl {
		padding-top : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@xl {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@xl {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@xl {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@xl {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@xl {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@xl {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@xl {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@xl {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@xl {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@xl {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@xl {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@xl {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@xl {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@xl {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@xl {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@xl {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@xl {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@xl {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@xl {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@xl {
		padding-bottom : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@xl {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@xl {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@xl {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@xl {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@xl {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@xl {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@xl {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@xl {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@xl {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@xl {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@xl {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@xl {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@xl {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@xl {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@xl {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@xl {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@xl {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@xl {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@xl {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@xl {
		padding-left : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@xl {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@xl {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@xl {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@xl {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@xl {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@xl {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@xl {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@xl {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@xl {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@xl {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@xl {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@xl {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@xl {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@xl {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@xl {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@xl {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@xl {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@xl {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@xl {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@xl {
		padding-right : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@xl {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@xl {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@xl {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@xl {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@xl {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@xl {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@xl {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@xl {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@xl {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@xl {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@xl {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@xl {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@xl {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@xl {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@xl {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@xl {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@xl {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@xl {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@xl {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@xl {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-xl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@xl {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@xl {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@xl {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@xl {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@xl {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@xl {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@xl {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@xl {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@xl {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@xl {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@xl {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@xl {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@xl {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@xl {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@xl {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@xl {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@xl {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@xl {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@xl {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@xl {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
@media(--mq-xxl) {
	.m\:a\@xxl {
		margin : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.1\@xxl {
		margin : var(--z-dot1);
	}
	.m\:-\.1\@xxl {
		margin : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.2\@xxl {
		margin : var(--z-dot2);
	}
	.m\:-\.2\@xxl {
		margin : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.3\@xxl {
		margin : var(--z-dot3);
	}
	.m\:-\.3\@xxl {
		margin : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.4\@xxl {
		margin : var(--z-dot4);
	}
	.m\:-\.4\@xxl {
		margin : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.5\@xxl {
		margin : var(--z-dot5);
	}
	.m\:-\.5\@xxl {
		margin : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.6\@xxl {
		margin : var(--z-dot6);
	}
	.m\:-\.6\@xxl {
		margin : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.7\@xxl {
		margin : var(--z-dot7);
	}
	.m\:-\.7\@xxl {
		margin : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.8\@xxl {
		margin : var(--z-dot8);
	}
	.m\:-\.8\@xxl {
		margin : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:\.9\@xxl {
		margin : var(--z-dot9);
	}
	.m\:-\.9\@xxl {
		margin : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:0\@xxl {
		margin : var(--z0);
	}
	.m\:-0\@xxl {
		margin : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:1\@xxl {
		margin : var(--z1);
	}
	.m\:-1\@xxl {
		margin : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:2\@xxl {
		margin : var(--z2);
	}
	.m\:-2\@xxl {
		margin : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:3\@xxl {
		margin : var(--z3);
	}
	.m\:-3\@xxl {
		margin : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:4\@xxl {
		margin : var(--z4);
	}
	.m\:-4\@xxl {
		margin : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:5\@xxl {
		margin : var(--z5);
	}
	.m\:-5\@xxl {
		margin : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:6\@xxl {
		margin : var(--z6);
	}
	.m\:-6\@xxl {
		margin : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:7\@xxl {
		margin : var(--z7);
	}
	.m\:-7\@xxl {
		margin : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:8\@xxl {
		margin : var(--z8);
	}
	.m\:-8\@xxl {
		margin : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:9\@xxl {
		margin : var(--z9);
	}
	.m\:-9\@xxl {
		margin : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.m\:10\@xxl {
		margin : var(--z10);
	}
	.m\:-10\@xxl {
		margin : -var(--z10);
	}
}
@media(--mq-xxl) {
	.m-t\:a\@xxl {
		margin-top : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.1\@xxl {
		margin-top : var(--z-dot1);
	}
	.m-t\:-\.1\@xxl {
		margin-top : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.2\@xxl {
		margin-top : var(--z-dot2);
	}
	.m-t\:-\.2\@xxl {
		margin-top : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.3\@xxl {
		margin-top : var(--z-dot3);
	}
	.m-t\:-\.3\@xxl {
		margin-top : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.4\@xxl {
		margin-top : var(--z-dot4);
	}
	.m-t\:-\.4\@xxl {
		margin-top : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.5\@xxl {
		margin-top : var(--z-dot5);
	}
	.m-t\:-\.5\@xxl {
		margin-top : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.6\@xxl {
		margin-top : var(--z-dot6);
	}
	.m-t\:-\.6\@xxl {
		margin-top : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.7\@xxl {
		margin-top : var(--z-dot7);
	}
	.m-t\:-\.7\@xxl {
		margin-top : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.8\@xxl {
		margin-top : var(--z-dot8);
	}
	.m-t\:-\.8\@xxl {
		margin-top : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:\.9\@xxl {
		margin-top : var(--z-dot9);
	}
	.m-t\:-\.9\@xxl {
		margin-top : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:0\@xxl {
		margin-top : var(--z0);
	}
	.m-t\:-0\@xxl {
		margin-top : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:1\@xxl {
		margin-top : var(--z1);
	}
	.m-t\:-1\@xxl {
		margin-top : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:2\@xxl {
		margin-top : var(--z2);
	}
	.m-t\:-2\@xxl {
		margin-top : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:3\@xxl {
		margin-top : var(--z3);
	}
	.m-t\:-3\@xxl {
		margin-top : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:4\@xxl {
		margin-top : var(--z4);
	}
	.m-t\:-4\@xxl {
		margin-top : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:5\@xxl {
		margin-top : var(--z5);
	}
	.m-t\:-5\@xxl {
		margin-top : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:6\@xxl {
		margin-top : var(--z6);
	}
	.m-t\:-6\@xxl {
		margin-top : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:7\@xxl {
		margin-top : var(--z7);
	}
	.m-t\:-7\@xxl {
		margin-top : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:8\@xxl {
		margin-top : var(--z8);
	}
	.m-t\:-8\@xxl {
		margin-top : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:9\@xxl {
		margin-top : var(--z9);
	}
	.m-t\:-9\@xxl {
		margin-top : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-t\:10\@xxl {
		margin-top : var(--z10);
	}
	.m-t\:-10\@xxl {
		margin-top : -var(--z10);
	}
}
@media(--mq-xxl) {
	.m-b\:a\@xxl {
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.1\@xxl {
		margin-bottom : var(--z-dot1);
	}
	.m-b\:-\.1\@xxl {
		margin-bottom : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.2\@xxl {
		margin-bottom : var(--z-dot2);
	}
	.m-b\:-\.2\@xxl {
		margin-bottom : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.3\@xxl {
		margin-bottom : var(--z-dot3);
	}
	.m-b\:-\.3\@xxl {
		margin-bottom : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.4\@xxl {
		margin-bottom : var(--z-dot4);
	}
	.m-b\:-\.4\@xxl {
		margin-bottom : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.5\@xxl {
		margin-bottom : var(--z-dot5);
	}
	.m-b\:-\.5\@xxl {
		margin-bottom : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.6\@xxl {
		margin-bottom : var(--z-dot6);
	}
	.m-b\:-\.6\@xxl {
		margin-bottom : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.7\@xxl {
		margin-bottom : var(--z-dot7);
	}
	.m-b\:-\.7\@xxl {
		margin-bottom : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.8\@xxl {
		margin-bottom : var(--z-dot8);
	}
	.m-b\:-\.8\@xxl {
		margin-bottom : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:\.9\@xxl {
		margin-bottom : var(--z-dot9);
	}
	.m-b\:-\.9\@xxl {
		margin-bottom : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:0\@xxl {
		margin-bottom : var(--z0);
	}
	.m-b\:-0\@xxl {
		margin-bottom : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:1\@xxl {
		margin-bottom : var(--z1);
	}
	.m-b\:-1\@xxl {
		margin-bottom : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:2\@xxl {
		margin-bottom : var(--z2);
	}
	.m-b\:-2\@xxl {
		margin-bottom : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:3\@xxl {
		margin-bottom : var(--z3);
	}
	.m-b\:-3\@xxl {
		margin-bottom : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:4\@xxl {
		margin-bottom : var(--z4);
	}
	.m-b\:-4\@xxl {
		margin-bottom : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:5\@xxl {
		margin-bottom : var(--z5);
	}
	.m-b\:-5\@xxl {
		margin-bottom : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:6\@xxl {
		margin-bottom : var(--z6);
	}
	.m-b\:-6\@xxl {
		margin-bottom : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:7\@xxl {
		margin-bottom : var(--z7);
	}
	.m-b\:-7\@xxl {
		margin-bottom : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:8\@xxl {
		margin-bottom : var(--z8);
	}
	.m-b\:-8\@xxl {
		margin-bottom : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:9\@xxl {
		margin-bottom : var(--z9);
	}
	.m-b\:-9\@xxl {
		margin-bottom : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-b\:10\@xxl {
		margin-bottom : var(--z10);
	}
	.m-b\:-10\@xxl {
		margin-bottom : -var(--z10);
	}
}
@media(--mq-xxl) {
	.m-l\:a\@xxl {
		margin-left : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.1\@xxl {
		margin-left : var(--z-dot1);
	}
	.m-l\:-\.1\@xxl {
		margin-left : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.2\@xxl {
		margin-left : var(--z-dot2);
	}
	.m-l\:-\.2\@xxl {
		margin-left : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.3\@xxl {
		margin-left : var(--z-dot3);
	}
	.m-l\:-\.3\@xxl {
		margin-left : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.4\@xxl {
		margin-left : var(--z-dot4);
	}
	.m-l\:-\.4\@xxl {
		margin-left : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.5\@xxl {
		margin-left : var(--z-dot5);
	}
	.m-l\:-\.5\@xxl {
		margin-left : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.6\@xxl {
		margin-left : var(--z-dot6);
	}
	.m-l\:-\.6\@xxl {
		margin-left : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.7\@xxl {
		margin-left : var(--z-dot7);
	}
	.m-l\:-\.7\@xxl {
		margin-left : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.8\@xxl {
		margin-left : var(--z-dot8);
	}
	.m-l\:-\.8\@xxl {
		margin-left : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:\.9\@xxl {
		margin-left : var(--z-dot9);
	}
	.m-l\:-\.9\@xxl {
		margin-left : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:0\@xxl {
		margin-left : var(--z0);
	}
	.m-l\:-0\@xxl {
		margin-left : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:1\@xxl {
		margin-left : var(--z1);
	}
	.m-l\:-1\@xxl {
		margin-left : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:2\@xxl {
		margin-left : var(--z2);
	}
	.m-l\:-2\@xxl {
		margin-left : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:3\@xxl {
		margin-left : var(--z3);
	}
	.m-l\:-3\@xxl {
		margin-left : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:4\@xxl {
		margin-left : var(--z4);
	}
	.m-l\:-4\@xxl {
		margin-left : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:5\@xxl {
		margin-left : var(--z5);
	}
	.m-l\:-5\@xxl {
		margin-left : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:6\@xxl {
		margin-left : var(--z6);
	}
	.m-l\:-6\@xxl {
		margin-left : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:7\@xxl {
		margin-left : var(--z7);
	}
	.m-l\:-7\@xxl {
		margin-left : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:8\@xxl {
		margin-left : var(--z8);
	}
	.m-l\:-8\@xxl {
		margin-left : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:9\@xxl {
		margin-left : var(--z9);
	}
	.m-l\:-9\@xxl {
		margin-left : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-l\:10\@xxl {
		margin-left : var(--z10);
	}
	.m-l\:-10\@xxl {
		margin-left : -var(--z10);
	}
}
@media(--mq-xxl) {
	.m-r\:a\@xxl {
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.1\@xxl {
		margin-right : var(--z-dot1);
	}
	.m-r\:-\.1\@xxl {
		margin-right : -var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.2\@xxl {
		margin-right : var(--z-dot2);
	}
	.m-r\:-\.2\@xxl {
		margin-right : -var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.3\@xxl {
		margin-right : var(--z-dot3);
	}
	.m-r\:-\.3\@xxl {
		margin-right : -var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.4\@xxl {
		margin-right : var(--z-dot4);
	}
	.m-r\:-\.4\@xxl {
		margin-right : -var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.5\@xxl {
		margin-right : var(--z-dot5);
	}
	.m-r\:-\.5\@xxl {
		margin-right : -var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.6\@xxl {
		margin-right : var(--z-dot6);
	}
	.m-r\:-\.6\@xxl {
		margin-right : -var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.7\@xxl {
		margin-right : var(--z-dot7);
	}
	.m-r\:-\.7\@xxl {
		margin-right : -var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.8\@xxl {
		margin-right : var(--z-dot8);
	}
	.m-r\:-\.8\@xxl {
		margin-right : -var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:\.9\@xxl {
		margin-right : var(--z-dot9);
	}
	.m-r\:-\.9\@xxl {
		margin-right : -var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:0\@xxl {
		margin-right : var(--z0);
	}
	.m-r\:-0\@xxl {
		margin-right : -var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:1\@xxl {
		margin-right : var(--z1);
	}
	.m-r\:-1\@xxl {
		margin-right : -var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:2\@xxl {
		margin-right : var(--z2);
	}
	.m-r\:-2\@xxl {
		margin-right : -var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:3\@xxl {
		margin-right : var(--z3);
	}
	.m-r\:-3\@xxl {
		margin-right : -var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:4\@xxl {
		margin-right : var(--z4);
	}
	.m-r\:-4\@xxl {
		margin-right : -var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:5\@xxl {
		margin-right : var(--z5);
	}
	.m-r\:-5\@xxl {
		margin-right : -var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:6\@xxl {
		margin-right : var(--z6);
	}
	.m-r\:-6\@xxl {
		margin-right : -var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:7\@xxl {
		margin-right : var(--z7);
	}
	.m-r\:-7\@xxl {
		margin-right : -var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:8\@xxl {
		margin-right : var(--z8);
	}
	.m-r\:-8\@xxl {
		margin-right : -var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:9\@xxl {
		margin-right : var(--z9);
	}
	.m-r\:-9\@xxl {
		margin-right : -var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-r\:10\@xxl {
		margin-right : var(--z10);
	}
	.m-r\:-10\@xxl {
		margin-right : -var(--z10);
	}
}
@media(--mq-xxl) {
	.m-x\:a\@xxl {
		margin-left : auto;
		margin-right : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.1\@xxl {
		margin-left : var(--z-dot1);
		margin-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.2\@xxl {
		margin-left : var(--z-dot2);
		margin-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.3\@xxl {
		margin-left : var(--z-dot3);
		margin-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.4\@xxl {
		margin-left : var(--z-dot4);
		margin-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.5\@xxl {
		margin-left : var(--z-dot5);
		margin-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.6\@xxl {
		margin-left : var(--z-dot6);
		margin-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.7\@xxl {
		margin-left : var(--z-dot7);
		margin-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.8\@xxl {
		margin-left : var(--z-dot8);
		margin-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:\.9\@xxl {
		margin-left : var(--z-dot9);
		margin-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:0\@xxl {
		margin-left : var(--z0);
		margin-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:1\@xxl {
		margin-left : var(--z1);
		margin-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:2\@xxl {
		margin-left : var(--z2);
		margin-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:3\@xxl {
		margin-left : var(--z3);
		margin-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:4\@xxl {
		margin-left : var(--z4);
		margin-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:5\@xxl {
		margin-left : var(--z5);
		margin-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:6\@xxl {
		margin-left : var(--z6);
		margin-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:7\@xxl {
		margin-left : var(--z7);
		margin-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:8\@xxl {
		margin-left : var(--z8);
		margin-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:9\@xxl {
		margin-left : var(--z9);
		margin-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-x\:10\@xxl {
		margin-left : var(--z10);
		margin-right : var(--z10);
	}
}
@media(--mq-xxl) {
	.m-y\:a\@xxl {
		margin-top : auto;
		margin-bottom : auto;
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.1\@xxl {
		margin-top : var(--z-dot1);
		margin-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.2\@xxl {
		margin-top : var(--z-dot2);
		margin-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.3\@xxl {
		margin-top : var(--z-dot3);
		margin-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.4\@xxl {
		margin-top : var(--z-dot4);
		margin-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.5\@xxl {
		margin-top : var(--z-dot5);
		margin-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.6\@xxl {
		margin-top : var(--z-dot6);
		margin-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.7\@xxl {
		margin-top : var(--z-dot7);
		margin-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.8\@xxl {
		margin-top : var(--z-dot8);
		margin-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:\.9\@xxl {
		margin-top : var(--z-dot9);
		margin-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:0\@xxl {
		margin-top : var(--z0);
		margin-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:1\@xxl {
		margin-top : var(--z1);
		margin-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:2\@xxl {
		margin-top : var(--z2);
		margin-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:3\@xxl {
		margin-top : var(--z3);
		margin-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:4\@xxl {
		margin-top : var(--z4);
		margin-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:5\@xxl {
		margin-top : var(--z5);
		margin-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:6\@xxl {
		margin-top : var(--z6);
		margin-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:7\@xxl {
		margin-top : var(--z7);
		margin-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:8\@xxl {
		margin-top : var(--z8);
		margin-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:9\@xxl {
		margin-top : var(--z9);
		margin-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.m-y\:10\@xxl {
		margin-top : var(--z10);
		margin-bottom : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.1\@xxl {
		padding : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.2\@xxl {
		padding : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.3\@xxl {
		padding : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.4\@xxl {
		padding : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.5\@xxl {
		padding : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.6\@xxl {
		padding : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.7\@xxl {
		padding : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.8\@xxl {
		padding : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:\.9\@xxl {
		padding : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:0\@xxl {
		padding : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:1\@xxl {
		padding : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:2\@xxl {
		padding : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:3\@xxl {
		padding : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:4\@xxl {
		padding : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:5\@xxl {
		padding : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:6\@xxl {
		padding : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:7\@xxl {
		padding : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:8\@xxl {
		padding : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:9\@xxl {
		padding : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short):$(z)@$(mq)">$(short):$(z)@$(mq)</span>
								```
							*/
	.p\:10\@xxl {
		padding : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.1\@xxl {
		padding-top : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.2\@xxl {
		padding-top : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.3\@xxl {
		padding-top : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.4\@xxl {
		padding-top : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.5\@xxl {
		padding-top : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.6\@xxl {
		padding-top : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.7\@xxl {
		padding-top : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.8\@xxl {
		padding-top : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:\.9\@xxl {
		padding-top : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:0\@xxl {
		padding-top : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:1\@xxl {
		padding-top : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:2\@xxl {
		padding-top : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:3\@xxl {
		padding-top : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:4\@xxl {
		padding-top : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:5\@xxl {
		padding-top : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:6\@xxl {
		padding-top : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:7\@xxl {
		padding-top : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:8\@xxl {
		padding-top : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:9\@xxl {
		padding-top : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-t\:10\@xxl {
		padding-top : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.1\@xxl {
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.2\@xxl {
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.3\@xxl {
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.4\@xxl {
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.5\@xxl {
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.6\@xxl {
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.7\@xxl {
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.8\@xxl {
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:\.9\@xxl {
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:0\@xxl {
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:1\@xxl {
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:2\@xxl {
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:3\@xxl {
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:4\@xxl {
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:5\@xxl {
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:6\@xxl {
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:7\@xxl {
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:8\@xxl {
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:9\@xxl {
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-b\:10\@xxl {
		padding-bottom : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.1\@xxl {
		padding-left : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.2\@xxl {
		padding-left : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.3\@xxl {
		padding-left : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.4\@xxl {
		padding-left : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.5\@xxl {
		padding-left : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.6\@xxl {
		padding-left : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.7\@xxl {
		padding-left : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.8\@xxl {
		padding-left : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:\.9\@xxl {
		padding-left : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:0\@xxl {
		padding-left : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:1\@xxl {
		padding-left : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:2\@xxl {
		padding-left : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:3\@xxl {
		padding-left : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:4\@xxl {
		padding-left : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:5\@xxl {
		padding-left : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:6\@xxl {
		padding-left : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:7\@xxl {
		padding-left : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:8\@xxl {
		padding-left : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:9\@xxl {
		padding-left : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-l\:10\@xxl {
		padding-left : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.1\@xxl {
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.2\@xxl {
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.3\@xxl {
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.4\@xxl {
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.5\@xxl {
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.6\@xxl {
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.7\@xxl {
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.8\@xxl {
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:\.9\@xxl {
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:0\@xxl {
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:1\@xxl {
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:2\@xxl {
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:3\@xxl {
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:4\@xxl {
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:5\@xxl {
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:6\@xxl {
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:7\@xxl {
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:8\@xxl {
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:9\@xxl {
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-r\:10\@xxl {
		padding-right : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.1\@xxl {
		padding-left : var(--z-dot1);
		padding-right : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.2\@xxl {
		padding-left : var(--z-dot2);
		padding-right : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.3\@xxl {
		padding-left : var(--z-dot3);
		padding-right : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.4\@xxl {
		padding-left : var(--z-dot4);
		padding-right : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.5\@xxl {
		padding-left : var(--z-dot5);
		padding-right : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.6\@xxl {
		padding-left : var(--z-dot6);
		padding-right : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.7\@xxl {
		padding-left : var(--z-dot7);
		padding-right : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.8\@xxl {
		padding-left : var(--z-dot8);
		padding-right : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:\.9\@xxl {
		padding-left : var(--z-dot9);
		padding-right : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:0\@xxl {
		padding-left : var(--z0);
		padding-right : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:1\@xxl {
		padding-left : var(--z1);
		padding-right : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:2\@xxl {
		padding-left : var(--z2);
		padding-right : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:3\@xxl {
		padding-left : var(--z3);
		padding-right : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:4\@xxl {
		padding-left : var(--z4);
		padding-right : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:5\@xxl {
		padding-left : var(--z5);
		padding-right : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:6\@xxl {
		padding-left : var(--z6);
		padding-right : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:7\@xxl {
		padding-left : var(--z7);
		padding-right : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:8\@xxl {
		padding-left : var(--z8);
		padding-right : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:9\@xxl {
		padding-left : var(--z9);
		padding-right : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-x\:10\@xxl {
		padding-left : var(--z10);
		padding-right : var(--z10);
	}
}
@media(--mq-xxl) {
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.1\@xxl {
		padding-top : var(--z-dot1);
		padding-bottom : var(--z-dot1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.2\@xxl {
		padding-top : var(--z-dot2);
		padding-bottom : var(--z-dot2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.3\@xxl {
		padding-top : var(--z-dot3);
		padding-bottom : var(--z-dot3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.4\@xxl {
		padding-top : var(--z-dot4);
		padding-bottom : var(--z-dot4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.5\@xxl {
		padding-top : var(--z-dot5);
		padding-bottom : var(--z-dot5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.6\@xxl {
		padding-top : var(--z-dot6);
		padding-bottom : var(--z-dot6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.7\@xxl {
		padding-top : var(--z-dot7);
		padding-bottom : var(--z-dot7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.8\@xxl {
		padding-top : var(--z-dot8);
		padding-bottom : var(--z-dot8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:\.9\@xxl {
		padding-top : var(--z-dot9);
		padding-bottom : var(--z-dot9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:0\@xxl {
		padding-top : var(--z0);
		padding-bottom : var(--z0);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:1\@xxl {
		padding-top : var(--z1);
		padding-bottom : var(--z1);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:2\@xxl {
		padding-top : var(--z2);
		padding-bottom : var(--z2);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:3\@xxl {
		padding-top : var(--z3);
		padding-bottom : var(--z3);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:4\@xxl {
		padding-top : var(--z4);
		padding-bottom : var(--z4);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:5\@xxl {
		padding-top : var(--z5);
		padding-bottom : var(--z5);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:6\@xxl {
		padding-top : var(--z6);
		padding-bottom : var(--z6);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:7\@xxl {
		padding-top : var(--z7);
		padding-bottom : var(--z7);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:8\@xxl {
		padding-top : var(--z8);
		padding-bottom : var(--z8);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:9\@xxl {
		padding-top : var(--z9);
		padding-bottom : var(--z9);
	}
	/*---
								title: $(prop)
								section: Spacing
								---

								```html
								<div class=".$(short)-$(dir):$(z)@$(mq)">$(short)-$(dir):$(z)@$(mq)</span>
								```
							*/
	.p-y\:10\@xxl {
		padding-top : var(--z10);
		padding-bottom : var(--z10);
	}
}
:root {
	--display-props: block, inline-block, inline, flex, table, table-cell, none;
	--display-shorthands: b, i-b, i, f, t, t-c, n;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:b {
	display : block;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:i-b {
	display : inline-block;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:i {
	display : inline;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:f {
	display : flex;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:t {
	display : table;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:t-c {
	display : table-cell;
}
/*---
				title: $(prop)
				section: Display
				---

				```html
				<div class=".d:$(short)">d:$(short)</span>
				```
			*/
.d\:n {
	display : none;
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@xxs {
		display : block;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@xxs {
		display : inline-block;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@xxs {
		display : inline;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@xxs {
		display : flex;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@xxs {
		display : table;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@xxs {
		display : table-cell;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@xxs {
		display : none;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@xs {
		display : block;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@xs {
		display : inline-block;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@xs {
		display : inline;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@xs {
		display : flex;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@xs {
		display : table;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@xs {
		display : table-cell;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@xs {
		display : none;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@sm {
		display : block;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@sm {
		display : inline-block;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@sm {
		display : inline;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@sm {
		display : flex;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@sm {
		display : table;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@sm {
		display : table-cell;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@sm {
		display : none;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@md {
		display : block;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@md {
		display : inline-block;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@md {
		display : inline;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@md {
		display : flex;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@md {
		display : table;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@md {
		display : table-cell;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@md {
		display : none;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@lg {
		display : block;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@lg {
		display : inline-block;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@lg {
		display : inline;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@lg {
		display : flex;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@lg {
		display : table;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@lg {
		display : table-cell;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@lg {
		display : none;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@xl {
		display : block;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@xl {
		display : inline-block;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@xl {
		display : inline;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@xl {
		display : flex;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@xl {
		display : table;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@xl {
		display : table-cell;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@xl {
		display : none;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:b\@xxl {
		display : block;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i-b\@xxl {
		display : inline-block;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:i\@xxl {
		display : inline;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:f\@xxl {
		display : flex;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t\@xxl {
		display : table;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:t-c\@xxl {
		display : table-cell;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Display
					---

					```html
					<div class=".d:$(short)@$(mq)">d:$(short)</span>
					```
				*/
	.d\:n\@xxl {
		display : none;
	}
}
:root {
	--fl-options: (left, right, none, clear), (l, r, n, c);
}
/*---
				title: $(style)
				section: Float
				---

				```html
				<span class=".fl:$(var)">fl:$(var)</span>
				```
			*/
.fl\:l {
	float : left;
}
/*---
				title: $(style)
				section: Float
				---

				```html
				<span class=".fl:$(var)">fl:$(var)</span>
				```
			*/
.fl\:r {
	float : right;
}
/*---
				title: $(style)
				section: Float
				---

				```html
				<span class=".fl:$(var)">fl:$(var)</span>
				```
			*/
.fl\:n {
	float : none;
}
/*---
				title: $(style)
				section: Float
				---

				```html
				<span class=".fl:$(var)">fl:$(var)</span>
				```
			*/
.fl\:c::before,
				.fl\:c::after {
	content : " ";
	display : table;
}
.fl\:c::after {
	clear : both;
}
@media (--mq-xxs) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@xxs {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@xxs {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@xxs {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@xxs {
		float : clear;
	}
}
@media (--mq-xs) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@xs {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@xs {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@xs {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@xs {
		float : clear;
	}
}
@media (--mq-sm) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@sm {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@sm {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@sm {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@sm {
		float : clear;
	}
}
@media (--mq-md) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@md {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@md {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@md {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@md {
		float : clear;
	}
}
@media (--mq-lg) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@lg {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@lg {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@lg {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@lg {
		float : clear;
	}
}
@media (--mq-xl) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@xl {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@xl {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@xl {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@xl {
		float : clear;
	}
}
@media (--mq-xxl) {
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:l\@xxl {
		float : left;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:r\@xxl {
		float : right;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:n\@xxl {
		float : none;
	}
	/*---
					title: $(style)
					section: Float
					---

					```html
					<span class=".fl:$(var)\@$(mq)">fl:$(var)@$(mq)</span>
					```
				*/
	.fl\:c\@xxl {
		float : clear;
	}
}
:root {
	--v-a-options: (middle, baseline, top, bottom, center), (m, bl, t, b, c);
}
/*---
				title: $(style)
				section: vertical-alignment
				---

				```html
				<span class=".v-a:$(var)">v-a:$(var)</span>
				```
			*/
.v-a\:m {
	vertical-align : middle;
}
/*---
				title: $(style)
				section: vertical-alignment
				---

				```html
				<span class=".v-a:$(var)">v-a:$(var)</span>
				```
			*/
.v-a\:bl {
	vertical-align : baseline;
}
/*---
				title: $(style)
				section: vertical-alignment
				---

				```html
				<span class=".v-a:$(var)">v-a:$(var)</span>
				```
			*/
.v-a\:t {
	vertical-align : top;
}
/*---
				title: $(style)
				section: vertical-alignment
				---

				```html
				<span class=".v-a:$(var)">v-a:$(var)</span>
				```
			*/
.v-a\:b {
	vertical-align : bottom;
}
/*---
				title: $(style)
				section: vertical-alignment
				---

				```html
				<span class=".v-a:$(var)">v-a:$(var)</span>
				```
			*/
.v-a\:c {
	top : 50%;
	transform : translateY(-50%);
}
@media (--mq-xxs) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@xxs {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@xxs {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@xxs {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@xxs {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
@media (--mq-xs) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@xs {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@xs {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@xs {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@xs {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
@media (--mq-sm) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@sm {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@sm {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@sm {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@sm {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
@media (--mq-md) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@md {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@md {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@md {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@md {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
@media (--mq-lg) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@lg {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@lg {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@lg {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@lg {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
@media (--mq-xl) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@xl {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@xl {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@xl {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@xl {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
@media (--mq-xxl) {
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:m\@xxl {
		vertical-align : middle;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:bl\@xxl {
		vertical-align : baseline;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:t\@xxl {
		vertical-align : top;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:b\@xxl {
		vertical-align : bottom;
	}
	/*---
					title: $(style)
					section: vertical-alignment
					---

					```html
					<span class=".v-a:$(var)\@$(mq)">v-a:$(var)@$(mq)</span>
					```
				*/
	.v-a\:c {
		top : 50%;
		transform : translateY(-50%);
	}
}
:root {
	--flx-direction: (row, row-reverse, column, column-reverse), (r, r-r, c, c-r);
	--flx-wrap: (nowrap, wrap, wrap-reverse), (n, w, w-r);
	--flx-j-c: (flex-start, flex-end, center, space-between, space-around), (f-s, f-e, c, s-b, s-a);
	--flx-a-i: (flex-start, flex-end, center, baseline, stretch), (f-s, f-e, c, b, s);
	--flx-a-c: (flex-start, flex-end, center, stretch, space-between, space-around), (f-s, f-e, c, s, s-b, s-a);
	--flx-a-s: (flex-start, flex-end, center, stretch, auto), (f-s, f-e, c, s, a);

}
/*---
				title: Direction: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-d:$(short)">flx-d:$(short)</span>
				```
			*/
.flx-d\:r {
	flex-direction : row;
}
/*---
				title: Direction: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-d:$(short)">flx-d:$(short)</span>
				```
			*/
.flx-d\:r-r {
	flex-direction : row-reverse;
}
/*---
				title: Direction: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-d:$(short)">flx-d:$(short)</span>
				```
			*/
.flx-d\:c {
	flex-direction : column;
}
/*---
				title: Direction: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-d:$(short)">flx-d:$(short)</span>
				```
			*/
.flx-d\:c-r {
	flex-direction : column-reverse;
}
@media(--mq-xxs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@xxs {
		flex-direction : row;
	}
}
@media(--mq-xxs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@xxs {
		flex-direction : row-reverse;
	}
}
@media(--mq-xxs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@xxs {
		flex-direction : column;
	}
}
@media(--mq-xxs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@xxs {
		flex-direction : column-reverse;
	}
}
@media(--mq-xs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@xs {
		flex-direction : row;
	}
}
@media(--mq-xs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@xs {
		flex-direction : row-reverse;
	}
}
@media(--mq-xs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@xs {
		flex-direction : column;
	}
}
@media(--mq-xs) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@xs {
		flex-direction : column-reverse;
	}
}
@media(--mq-sm) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@sm {
		flex-direction : row;
	}
}
@media(--mq-sm) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@sm {
		flex-direction : row-reverse;
	}
}
@media(--mq-sm) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@sm {
		flex-direction : column;
	}
}
@media(--mq-sm) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@sm {
		flex-direction : column-reverse;
	}
}
@media(--mq-md) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@md {
		flex-direction : row;
	}
}
@media(--mq-md) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@md {
		flex-direction : row-reverse;
	}
}
@media(--mq-md) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@md {
		flex-direction : column;
	}
}
@media(--mq-md) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@md {
		flex-direction : column-reverse;
	}
}
@media(--mq-lg) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@lg {
		flex-direction : row;
	}
}
@media(--mq-lg) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@lg {
		flex-direction : row-reverse;
	}
}
@media(--mq-lg) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@lg {
		flex-direction : column;
	}
}
@media(--mq-lg) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@lg {
		flex-direction : column-reverse;
	}
}
@media(--mq-xl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@xl {
		flex-direction : row;
	}
}
@media(--mq-xl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@xl {
		flex-direction : row-reverse;
	}
}
@media(--mq-xl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@xl {
		flex-direction : column;
	}
}
@media(--mq-xl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@xl {
		flex-direction : column-reverse;
	}
}
@media(--mq-xxl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r\@xxl {
		flex-direction : row;
	}
}
@media(--mq-xxl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:r-r\@xxl {
		flex-direction : row-reverse;
	}
}
@media(--mq-xxl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c\@xxl {
		flex-direction : column;
	}
}
@media(--mq-xxl) {
	/*---
					title: Direction: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-d:$(short)@$(mq)">flx-d:$(short)@$(mq)</span>
					```
				*/
	.flx-d\:c-r\@xxl {
		flex-direction : column-reverse;
	}
}
/*---
				title: Wrap: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-w:$(short)">flx-w:$(short)</span>
				```
			*/
.flx-w\:n {
	flex-wrap : nowrap;
}
/*---
				title: Wrap: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-w:$(short)">flx-w:$(short)</span>
				```
			*/
.flx-w\:w {
	flex-wrap : wrap;
}
/*---
				title: Wrap: $(prop)
				section: Flex
				---

				```html
				<div class=".flx-w:$(short)">flx-w:$(short)</span>
				```
			*/
.flx-w\:w-r {
	flex-wrap : wrap-reverse;
}
@media(--mq-xxs) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@xxs {
		flex-wrap : nowrap;
	}
}
@media(--mq-xxs) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@xxs {
		flex-wrap : wrap;
	}
}
@media(--mq-xxs) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@xxs {
		flex-wrap : wrap-reverse;
	}
}
@media(--mq-xs) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@xs {
		flex-wrap : nowrap;
	}
}
@media(--mq-xs) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@xs {
		flex-wrap : wrap;
	}
}
@media(--mq-xs) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@xs {
		flex-wrap : wrap-reverse;
	}
}
@media(--mq-sm) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@sm {
		flex-wrap : nowrap;
	}
}
@media(--mq-sm) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@sm {
		flex-wrap : wrap;
	}
}
@media(--mq-sm) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@sm {
		flex-wrap : wrap-reverse;
	}
}
@media(--mq-md) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@md {
		flex-wrap : nowrap;
	}
}
@media(--mq-md) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@md {
		flex-wrap : wrap;
	}
}
@media(--mq-md) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@md {
		flex-wrap : wrap-reverse;
	}
}
@media(--mq-lg) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@lg {
		flex-wrap : nowrap;
	}
}
@media(--mq-lg) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@lg {
		flex-wrap : wrap;
	}
}
@media(--mq-lg) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@lg {
		flex-wrap : wrap-reverse;
	}
}
@media(--mq-xl) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@xl {
		flex-wrap : nowrap;
	}
}
@media(--mq-xl) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@xl {
		flex-wrap : wrap;
	}
}
@media(--mq-xl) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@xl {
		flex-wrap : wrap-reverse;
	}
}
@media(--mq-xxl) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:n\@xxl {
		flex-wrap : nowrap;
	}
}
@media(--mq-xxl) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w\@xxl {
		flex-wrap : wrap;
	}
}
@media(--mq-xxl) {
	/*---
					title: Wrap: $(prop)
					section: Flex
					---

					```html
					<div class=".flx-w:$(short)@$(mq)">flx-w:$(short)@$(mq)</span>
					```
				*/
	.flx-w\:w-r\@xxl {
		flex-wrap : wrap-reverse;
	}
}
/*---
				title: Justify Content: $(prop)
				section: Flex
				---

				```html
				<div class=".j-c:$(short)">j-c:$(short)</span>
				```
			*/
.j-c\:f-s {
	justify-content : flex-start;
}
/*---
				title: Justify Content: $(prop)
				section: Flex
				---

				```html
				<div class=".j-c:$(short)">j-c:$(short)</span>
				```
			*/
.j-c\:f-e {
	justify-content : flex-end;
}
/*---
				title: Justify Content: $(prop)
				section: Flex
				---

				```html
				<div class=".j-c:$(short)">j-c:$(short)</span>
				```
			*/
.j-c\:c {
	justify-content : center;
}
/*---
				title: Justify Content: $(prop)
				section: Flex
				---

				```html
				<div class=".j-c:$(short)">j-c:$(short)</span>
				```
			*/
.j-c\:s-b {
	justify-content : space-between;
}
/*---
				title: Justify Content: $(prop)
				section: Flex
				---

				```html
				<div class=".j-c:$(short)">j-c:$(short)</span>
				```
			*/
.j-c\:s-a {
	justify-content : space-around;
}
@media(--mq-xxs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@xxs {
		justify-content : flex-start;
	}
}
@media(--mq-xxs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@xxs {
		justify-content : flex-end;
	}
}
@media(--mq-xxs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@xxs {
		justify-content : center;
	}
}
@media(--mq-xxs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@xxs {
		justify-content : space-between;
	}
}
@media(--mq-xxs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@xxs {
		justify-content : space-around;
	}
}
@media(--mq-xs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@xs {
		justify-content : flex-start;
	}
}
@media(--mq-xs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@xs {
		justify-content : flex-end;
	}
}
@media(--mq-xs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@xs {
		justify-content : center;
	}
}
@media(--mq-xs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@xs {
		justify-content : space-between;
	}
}
@media(--mq-xs) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@xs {
		justify-content : space-around;
	}
}
@media(--mq-sm) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@sm {
		justify-content : flex-start;
	}
}
@media(--mq-sm) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@sm {
		justify-content : flex-end;
	}
}
@media(--mq-sm) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@sm {
		justify-content : center;
	}
}
@media(--mq-sm) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@sm {
		justify-content : space-between;
	}
}
@media(--mq-sm) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@sm {
		justify-content : space-around;
	}
}
@media(--mq-md) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@md {
		justify-content : flex-start;
	}
}
@media(--mq-md) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@md {
		justify-content : flex-end;
	}
}
@media(--mq-md) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@md {
		justify-content : center;
	}
}
@media(--mq-md) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@md {
		justify-content : space-between;
	}
}
@media(--mq-md) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@md {
		justify-content : space-around;
	}
}
@media(--mq-lg) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@lg {
		justify-content : flex-start;
	}
}
@media(--mq-lg) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@lg {
		justify-content : flex-end;
	}
}
@media(--mq-lg) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@lg {
		justify-content : center;
	}
}
@media(--mq-lg) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@lg {
		justify-content : space-between;
	}
}
@media(--mq-lg) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@lg {
		justify-content : space-around;
	}
}
@media(--mq-xl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@xl {
		justify-content : flex-start;
	}
}
@media(--mq-xl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@xl {
		justify-content : flex-end;
	}
}
@media(--mq-xl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@xl {
		justify-content : center;
	}
}
@media(--mq-xl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@xl {
		justify-content : space-between;
	}
}
@media(--mq-xl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@xl {
		justify-content : space-around;
	}
}
@media(--mq-xxl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-s\@xxl {
		justify-content : flex-start;
	}
}
@media(--mq-xxl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:f-e\@xxl {
		justify-content : flex-end;
	}
}
@media(--mq-xxl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:c\@xxl {
		justify-content : center;
	}
}
@media(--mq-xxl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-b\@xxl {
		justify-content : space-between;
	}
}
@media(--mq-xxl) {
	/*---
					title: Justify Content: $(prop)
					section: Flex
					---

					```html
					<div class=".j-c:$(short)@$(mq)">j-c:$(short)@$(mq)</span>
					```
				*/
	.j-c\:s-a\@xxl {
		justify-content : space-around;
	}
}
/*---
				title: Align Items: $(prop)
				section: Flex
				---

				```html
				<div class=".a-i:$(short)">a-i:$(short)</span>
				```
			*/
.a-i\:f-s {
	align-items : flex-start;
}
/*---
				title: Align Items: $(prop)
				section: Flex
				---

				```html
				<div class=".a-i:$(short)">a-i:$(short)</span>
				```
			*/
.a-i\:f-e {
	align-items : flex-end;
}
/*---
				title: Align Items: $(prop)
				section: Flex
				---

				```html
				<div class=".a-i:$(short)">a-i:$(short)</span>
				```
			*/
.a-i\:c {
	align-items : center;
}
/*---
				title: Align Items: $(prop)
				section: Flex
				---

				```html
				<div class=".a-i:$(short)">a-i:$(short)</span>
				```
			*/
.a-i\:b {
	align-items : baseline;
}
/*---
				title: Align Items: $(prop)
				section: Flex
				---

				```html
				<div class=".a-i:$(short)">a-i:$(short)</span>
				```
			*/
.a-i\:s {
	align-items : stretch;
}
@media(--mq-xxs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@xxs {
		align-items : flex-start;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@xxs {
		align-items : flex-end;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@xxs {
		align-items : center;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@xxs {
		align-items : baseline;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@xxs {
		align-items : stretch;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@xs {
		align-items : flex-start;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@xs {
		align-items : flex-end;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@xs {
		align-items : center;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@xs {
		align-items : baseline;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@xs {
		align-items : stretch;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@sm {
		align-items : flex-start;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@sm {
		align-items : flex-end;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@sm {
		align-items : center;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@sm {
		align-items : baseline;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@sm {
		align-items : stretch;
	}
}
@media(--mq-md) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@md {
		align-items : flex-start;
	}
}
@media(--mq-md) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@md {
		align-items : flex-end;
	}
}
@media(--mq-md) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@md {
		align-items : center;
	}
}
@media(--mq-md) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@md {
		align-items : baseline;
	}
}
@media(--mq-md) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@md {
		align-items : stretch;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@lg {
		align-items : flex-start;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@lg {
		align-items : flex-end;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@lg {
		align-items : center;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@lg {
		align-items : baseline;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@lg {
		align-items : stretch;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@xl {
		align-items : flex-start;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@xl {
		align-items : flex-end;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@xl {
		align-items : center;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@xl {
		align-items : baseline;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@xl {
		align-items : stretch;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-s\@xxl {
		align-items : flex-start;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:f-e\@xxl {
		align-items : flex-end;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:c\@xxl {
		align-items : center;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:b\@xxl {
		align-items : baseline;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Items: $(prop)
					section: Flex
					---

					```html
					<div class=".a-i:$(short)@$(mq)">a-i:$(short)@$(mq)</span>
					```
				*/
	.a-i\:s\@xxl {
		align-items : stretch;
	}
}
/*---
				title: Align Content: $(prop)
				section: Flex
				---

				```html
				<div class=".a-c:$(short)">a-c:$(short)</span>
				```
			*/
.a-c\:f-s {
	align-content : flex-start;
}
/*---
				title: Align Content: $(prop)
				section: Flex
				---

				```html
				<div class=".a-c:$(short)">a-c:$(short)</span>
				```
			*/
.a-c\:f-e {
	align-content : flex-end;
}
/*---
				title: Align Content: $(prop)
				section: Flex
				---

				```html
				<div class=".a-c:$(short)">a-c:$(short)</span>
				```
			*/
.a-c\:c {
	align-content : center;
}
/*---
				title: Align Content: $(prop)
				section: Flex
				---

				```html
				<div class=".a-c:$(short)">a-c:$(short)</span>
				```
			*/
.a-c\:s {
	align-content : stretch;
}
/*---
				title: Align Content: $(prop)
				section: Flex
				---

				```html
				<div class=".a-c:$(short)">a-c:$(short)</span>
				```
			*/
.a-c\:s-b {
	align-content : space-between;
}
/*---
				title: Align Content: $(prop)
				section: Flex
				---

				```html
				<div class=".a-c:$(short)">a-c:$(short)</span>
				```
			*/
.a-c\:s-a {
	align-content : space-around;
}
@media(--mq-xxs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@xxs {
		align-content : flex-start;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@xxs {
		align-content : flex-end;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@xxs {
		align-content : center;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@xxs {
		align-content : stretch;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@xxs {
		align-content : space-between;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@xxs {
		align-content : space-around;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@xs {
		align-content : flex-start;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@xs {
		align-content : flex-end;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@xs {
		align-content : center;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@xs {
		align-content : stretch;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@xs {
		align-content : space-between;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@xs {
		align-content : space-around;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@sm {
		align-content : flex-start;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@sm {
		align-content : flex-end;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@sm {
		align-content : center;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@sm {
		align-content : stretch;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@sm {
		align-content : space-between;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@sm {
		align-content : space-around;
	}
}
@media(--mq-md) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@md {
		align-content : flex-start;
	}
}
@media(--mq-md) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@md {
		align-content : flex-end;
	}
}
@media(--mq-md) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@md {
		align-content : center;
	}
}
@media(--mq-md) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@md {
		align-content : stretch;
	}
}
@media(--mq-md) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@md {
		align-content : space-between;
	}
}
@media(--mq-md) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@md {
		align-content : space-around;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@lg {
		align-content : flex-start;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@lg {
		align-content : flex-end;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@lg {
		align-content : center;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@lg {
		align-content : stretch;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@lg {
		align-content : space-between;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@lg {
		align-content : space-around;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@xl {
		align-content : flex-start;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@xl {
		align-content : flex-end;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@xl {
		align-content : center;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@xl {
		align-content : stretch;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@xl {
		align-content : space-between;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@xl {
		align-content : space-around;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-s\@xxl {
		align-content : flex-start;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:f-e\@xxl {
		align-content : flex-end;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:c\@xxl {
		align-content : center;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s\@xxl {
		align-content : stretch;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-b\@xxl {
		align-content : space-between;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Content: $(prop)
					section: Flex
					---

					```html
					<div class=".a-c:$(short)@$(mq)">a-c:$(short)@$(mq)</span>
					```
				*/
	.a-c\:s-a\@xxl {
		align-content : space-around;
	}
}
/*---
				title: Align Self: $(prop)
				section: Flex
				---

				```html
				<div class=".a-s:$(short)">a-s:$(short)</span>
				```
			*/
.a-s\:f-s {
	align-self : flex-start;
}
/*---
				title: Align Self: $(prop)
				section: Flex
				---

				```html
				<div class=".a-s:$(short)">a-s:$(short)</span>
				```
			*/
.a-s\:f-e {
	align-self : flex-end;
}
/*---
				title: Align Self: $(prop)
				section: Flex
				---

				```html
				<div class=".a-s:$(short)">a-s:$(short)</span>
				```
			*/
.a-s\:c {
	align-self : center;
}
/*---
				title: Align Self: $(prop)
				section: Flex
				---

				```html
				<div class=".a-s:$(short)">a-s:$(short)</span>
				```
			*/
.a-s\:s {
	align-self : stretch;
}
/*---
				title: Align Self: $(prop)
				section: Flex
				---

				```html
				<div class=".a-s:$(short)">a-s:$(short)</span>
				```
			*/
.a-s\:a {
	align-self : auto;
}
@media(--mq-xxs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@xxs {
		align-self : flex-start;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@xxs {
		align-self : flex-end;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@xxs {
		align-self : center;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@xxs {
		align-self : stretch;
	}
}
@media(--mq-xxs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@xxs {
		align-self : auto;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@xs {
		align-self : flex-start;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@xs {
		align-self : flex-end;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@xs {
		align-self : center;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@xs {
		align-self : stretch;
	}
}
@media(--mq-xs) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@xs {
		align-self : auto;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@sm {
		align-self : flex-start;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@sm {
		align-self : flex-end;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@sm {
		align-self : center;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@sm {
		align-self : stretch;
	}
}
@media(--mq-sm) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@sm {
		align-self : auto;
	}
}
@media(--mq-md) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@md {
		align-self : flex-start;
	}
}
@media(--mq-md) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@md {
		align-self : flex-end;
	}
}
@media(--mq-md) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@md {
		align-self : center;
	}
}
@media(--mq-md) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@md {
		align-self : stretch;
	}
}
@media(--mq-md) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@md {
		align-self : auto;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@lg {
		align-self : flex-start;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@lg {
		align-self : flex-end;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@lg {
		align-self : center;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@lg {
		align-self : stretch;
	}
}
@media(--mq-lg) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@lg {
		align-self : auto;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@xl {
		align-self : flex-start;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@xl {
		align-self : flex-end;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@xl {
		align-self : center;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@xl {
		align-self : stretch;
	}
}
@media(--mq-xl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@xl {
		align-self : auto;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-s\@xxl {
		align-self : flex-start;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:f-e\@xxl {
		align-self : flex-end;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:c\@xxl {
		align-self : center;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:s\@xxl {
		align-self : stretch;
	}
}
@media(--mq-xxl) {
	/*---
					title: Align Self: $(prop)
					section: Flex
					---

					```html
					<div class=".a-s:$(short)@$(mq)">a-s:$(short)@$(mq)</span>
					```
				*/
	.a-s\:a\@xxl {
		align-self : auto;
	}
}
/*---
				title: Order: 0
				section: Flex
				---

				```html
				<div class=".ord:0">ord:0</span>
				```
			*/
.ord\:0 {
	order : 0;
}
/*---
				title: Order: 1
				section: Flex
				---

				```html
				<div class=".ord:1">ord:1</span>
				```
			*/
.ord\:1 {
	order : 1;
}
/*---
				title: Order: 2
				section: Flex
				---

				```html
				<div class=".ord:2">ord:2</span>
				```
			*/
.ord\:2 {
	order : 2;
}
/*---
				title: Order: 3
				section: Flex
				---

				```html
				<div class=".ord:3">ord:3</span>
				```
			*/
.ord\:3 {
	order : 3;
}
/*---
				title: Order: 4
				section: Flex
				---

				```html
				<div class=".ord:4">ord:4</span>
				```
			*/
.ord\:4 {
	order : 4;
}
/*---
				title: Order: 5
				section: Flex
				---

				```html
				<div class=".ord:5">ord:5</span>
				```
			*/
.ord\:5 {
	order : 5;
}
/*---
				title: Order: 6
				section: Flex
				---

				```html
				<div class=".ord:6">ord:6</span>
				```
			*/
.ord\:6 {
	order : 6;
}
/*---
				title: Order: 7
				section: Flex
				---

				```html
				<div class=".ord:7">ord:7</span>
				```
			*/
.ord\:7 {
	order : 7;
}
/*---
				title: Order: 8
				section: Flex
				---

				```html
				<div class=".ord:8">ord:8</span>
				```
			*/
.ord\:8 {
	order : 8;
}
/*---
				title: Order: 9
				section: Flex
				---

				```html
				<div class=".ord:9">ord:9</span>
				```
			*/
.ord\:9 {
	order : 9;
}
/*---
				title: Order: 10
				section: Flex
				---

				```html
				<div class=".ord:10">ord:10</span>
				```
			*/
.ord\:10 {
	order : 10;
}
@media(--mq-xxs) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@xxs {
		order : 0;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@xxs {
		order : 1;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@xxs {
		order : 2;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@xxs {
		order : 3;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@xxs {
		order : 4;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@xxs {
		order : 5;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@xxs {
		order : 6;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@xxs {
		order : 7;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@xxs {
		order : 8;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@xxs {
		order : 9;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@xxs {
		order : 10;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@xs {
		order : 0;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@xs {
		order : 1;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@xs {
		order : 2;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@xs {
		order : 3;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@xs {
		order : 4;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@xs {
		order : 5;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@xs {
		order : 6;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@xs {
		order : 7;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@xs {
		order : 8;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@xs {
		order : 9;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@xs {
		order : 10;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@sm {
		order : 0;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@sm {
		order : 1;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@sm {
		order : 2;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@sm {
		order : 3;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@sm {
		order : 4;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@sm {
		order : 5;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@sm {
		order : 6;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@sm {
		order : 7;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@sm {
		order : 8;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@sm {
		order : 9;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@sm {
		order : 10;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@md {
		order : 0;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@md {
		order : 1;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@md {
		order : 2;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@md {
		order : 3;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@md {
		order : 4;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@md {
		order : 5;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@md {
		order : 6;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@md {
		order : 7;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@md {
		order : 8;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@md {
		order : 9;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@md {
		order : 10;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@lg {
		order : 0;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@lg {
		order : 1;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@lg {
		order : 2;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@lg {
		order : 3;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@lg {
		order : 4;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@lg {
		order : 5;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@lg {
		order : 6;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@lg {
		order : 7;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@lg {
		order : 8;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@lg {
		order : 9;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@lg {
		order : 10;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@xl {
		order : 0;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@xl {
		order : 1;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@xl {
		order : 2;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@xl {
		order : 3;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@xl {
		order : 4;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@xl {
		order : 5;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@xl {
		order : 6;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@xl {
		order : 7;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@xl {
		order : 8;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@xl {
		order : 9;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@xl {
		order : 10;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".ord:0@$(mq)">ord:0@$(mq)</span>
					```
				*/
	.ord\:0\@xxl {
		order : 0;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".ord:1@$(mq)">ord:1@$(mq)</span>
					```
				*/
	.ord\:1\@xxl {
		order : 1;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".ord:2@$(mq)">ord:2@$(mq)</span>
					```
				*/
	.ord\:2\@xxl {
		order : 2;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".ord:3@$(mq)">ord:3@$(mq)</span>
					```
				*/
	.ord\:3\@xxl {
		order : 3;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".ord:4@$(mq)">ord:4@$(mq)</span>
					```
				*/
	.ord\:4\@xxl {
		order : 4;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".ord:5@$(mq)">ord:5@$(mq)</span>
					```
				*/
	.ord\:5\@xxl {
		order : 5;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".ord:6@$(mq)">ord:6@$(mq)</span>
					```
				*/
	.ord\:6\@xxl {
		order : 6;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".ord:7@$(mq)">ord:7@$(mq)</span>
					```
				*/
	.ord\:7\@xxl {
		order : 7;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".ord:8@$(mq)">ord:8@$(mq)</span>
					```
				*/
	.ord\:8\@xxl {
		order : 8;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".ord:9@$(mq)">ord:9@$(mq)</span>
					```
				*/
	.ord\:9\@xxl {
		order : 9;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".ord:10@$(mq)">ord:10@$(mq)</span>
					```
				*/
	.ord\:10\@xxl {
		order : 10;
	}
}
/*---
				title: Grow: 0
				section: Flex
				---

				```html
				<div class=".flx-g:0">flx-g:0</span>
				```
			*/
.flx-g\:0 {
	flex-grow : 0;
}
/*---
				title: Grow: 1
				section: Flex
				---

				```html
				<div class=".flx-g:1">flx-g:1</span>
				```
			*/
.flx-g\:1 {
	flex-grow : 1;
}
/*---
				title: Grow: 2
				section: Flex
				---

				```html
				<div class=".flx-g:2">flx-g:2</span>
				```
			*/
.flx-g\:2 {
	flex-grow : 2;
}
/*---
				title: Grow: 3
				section: Flex
				---

				```html
				<div class=".flx-g:3">flx-g:3</span>
				```
			*/
.flx-g\:3 {
	flex-grow : 3;
}
/*---
				title: Grow: 4
				section: Flex
				---

				```html
				<div class=".flx-g:4">flx-g:4</span>
				```
			*/
.flx-g\:4 {
	flex-grow : 4;
}
/*---
				title: Grow: 5
				section: Flex
				---

				```html
				<div class=".flx-g:5">flx-g:5</span>
				```
			*/
.flx-g\:5 {
	flex-grow : 5;
}
/*---
				title: Grow: 6
				section: Flex
				---

				```html
				<div class=".flx-g:6">flx-g:6</span>
				```
			*/
.flx-g\:6 {
	flex-grow : 6;
}
/*---
				title: Grow: 7
				section: Flex
				---

				```html
				<div class=".flx-g:7">flx-g:7</span>
				```
			*/
.flx-g\:7 {
	flex-grow : 7;
}
/*---
				title: Grow: 8
				section: Flex
				---

				```html
				<div class=".flx-g:8">flx-g:8</span>
				```
			*/
.flx-g\:8 {
	flex-grow : 8;
}
/*---
				title: Grow: 9
				section: Flex
				---

				```html
				<div class=".flx-g:9">flx-g:9</span>
				```
			*/
.flx-g\:9 {
	flex-grow : 9;
}
/*---
				title: Grow: 10
				section: Flex
				---

				```html
				<div class=".flx-g:10">flx-g:10</span>
				```
			*/
.flx-g\:10 {
	flex-grow : 10;
}
@media(--mq-xxs) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@xxs {
		flex-grow : 0;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@xxs {
		flex-grow : 1;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@xxs {
		flex-grow : 2;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@xxs {
		flex-grow : 3;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@xxs {
		flex-grow : 4;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@xxs {
		flex-grow : 5;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@xxs {
		flex-grow : 6;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@xxs {
		flex-grow : 7;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@xxs {
		flex-grow : 8;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@xxs {
		flex-grow : 9;
	}
}
@media(--mq-xxs) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@xxs {
		flex-grow : 10;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@xs {
		flex-grow : 0;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@xs {
		flex-grow : 1;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@xs {
		flex-grow : 2;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@xs {
		flex-grow : 3;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@xs {
		flex-grow : 4;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@xs {
		flex-grow : 5;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@xs {
		flex-grow : 6;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@xs {
		flex-grow : 7;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@xs {
		flex-grow : 8;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@xs {
		flex-grow : 9;
	}
}
@media(--mq-xs) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@xs {
		flex-grow : 10;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@sm {
		flex-grow : 0;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@sm {
		flex-grow : 1;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@sm {
		flex-grow : 2;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@sm {
		flex-grow : 3;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@sm {
		flex-grow : 4;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@sm {
		flex-grow : 5;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@sm {
		flex-grow : 6;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@sm {
		flex-grow : 7;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@sm {
		flex-grow : 8;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@sm {
		flex-grow : 9;
	}
}
@media(--mq-sm) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@sm {
		flex-grow : 10;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@md {
		flex-grow : 0;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@md {
		flex-grow : 1;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@md {
		flex-grow : 2;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@md {
		flex-grow : 3;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@md {
		flex-grow : 4;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@md {
		flex-grow : 5;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@md {
		flex-grow : 6;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@md {
		flex-grow : 7;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@md {
		flex-grow : 8;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@md {
		flex-grow : 9;
	}
}
@media(--mq-md) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@md {
		flex-grow : 10;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@lg {
		flex-grow : 0;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@lg {
		flex-grow : 1;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@lg {
		flex-grow : 2;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@lg {
		flex-grow : 3;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@lg {
		flex-grow : 4;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@lg {
		flex-grow : 5;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@lg {
		flex-grow : 6;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@lg {
		flex-grow : 7;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@lg {
		flex-grow : 8;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@lg {
		flex-grow : 9;
	}
}
@media(--mq-lg) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@lg {
		flex-grow : 10;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@xl {
		flex-grow : 0;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@xl {
		flex-grow : 1;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@xl {
		flex-grow : 2;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@xl {
		flex-grow : 3;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@xl {
		flex-grow : 4;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@xl {
		flex-grow : 5;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@xl {
		flex-grow : 6;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@xl {
		flex-grow : 7;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@xl {
		flex-grow : 8;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@xl {
		flex-grow : 9;
	}
}
@media(--mq-xl) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@xl {
		flex-grow : 10;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 0
					section: Flex
					---

					```html
					<div class=".flx-g:0@$(mq)">flx-g:0@$(mq)</span>
					```
				*/
	.flx-g\:0\@xxl {
		flex-grow : 0;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 1
					section: Flex
					---

					```html
					<div class=".flx-g:1@$(mq)">flx-g:1@$(mq)</span>
					```
				*/
	.flx-g\:1\@xxl {
		flex-grow : 1;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 2
					section: Flex
					---

					```html
					<div class=".flx-g:2@$(mq)">flx-g:2@$(mq)</span>
					```
				*/
	.flx-g\:2\@xxl {
		flex-grow : 2;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 3
					section: Flex
					---

					```html
					<div class=".flx-g:3@$(mq)">flx-g:3@$(mq)</span>
					```
				*/
	.flx-g\:3\@xxl {
		flex-grow : 3;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 4
					section: Flex
					---

					```html
					<div class=".flx-g:4@$(mq)">flx-g:4@$(mq)</span>
					```
				*/
	.flx-g\:4\@xxl {
		flex-grow : 4;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 5
					section: Flex
					---

					```html
					<div class=".flx-g:5@$(mq)">flx-g:5@$(mq)</span>
					```
				*/
	.flx-g\:5\@xxl {
		flex-grow : 5;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 6
					section: Flex
					---

					```html
					<div class=".flx-g:6@$(mq)">flx-g:6@$(mq)</span>
					```
				*/
	.flx-g\:6\@xxl {
		flex-grow : 6;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 7
					section: Flex
					---

					```html
					<div class=".flx-g:7@$(mq)">flx-g:7@$(mq)</span>
					```
				*/
	.flx-g\:7\@xxl {
		flex-grow : 7;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 8
					section: Flex
					---

					```html
					<div class=".flx-g:8@$(mq)">flx-g:8@$(mq)</span>
					```
				*/
	.flx-g\:8\@xxl {
		flex-grow : 8;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 9
					section: Flex
					---

					```html
					<div class=".flx-g:9@$(mq)">flx-g:9@$(mq)</span>
					```
				*/
	.flx-g\:9\@xxl {
		flex-grow : 9;
	}
}
@media(--mq-xxl) {
	/*---
					title: Order: 10
					section: Flex
					---

					```html
					<div class=".flx-g:10@$(mq)">flx-g:10@$(mq)</span>
					```
				*/
	.flx-g\:10\@xxl {
		flex-grow : 10;
	}
}
.flx-s\:0 {
	flex-shrink : 0;
}
.flx-s\:1 {
	flex-shrink : 1;
}
.flx-s\:2 {
	flex-shrink : 2;
}
.flx-s\:3 {
	flex-shrink : 3;
}
.flx-s\:4 {
	flex-shrink : 4;
}
.flx-s\:5 {
	flex-shrink : 5;
}
.flx-s\:6 {
	flex-shrink : 6;
}
.flx-s\:7 {
	flex-shrink : 7;
}
.flx-s\:8 {
	flex-shrink : 8;
}
.flx-s\:9 {
	flex-shrink : 9;
}
.flx-s\:10 {
	flex-shrink : 10;
}
@media(--mq-xxs) {
	.flx-s\:0\@xxs {
		flex-shrink : 0;
	}
}
@media(--mq-xxs) {
	.flx-s\:1\@xxs {
		flex-shrink : 1;
	}
}
@media(--mq-xxs) {
	.flx-s\:2\@xxs {
		flex-shrink : 2;
	}
}
@media(--mq-xxs) {
	.flx-s\:3\@xxs {
		flex-shrink : 3;
	}
}
@media(--mq-xxs) {
	.flx-s\:4\@xxs {
		flex-shrink : 4;
	}
}
@media(--mq-xxs) {
	.flx-s\:5\@xxs {
		flex-shrink : 5;
	}
}
@media(--mq-xxs) {
	.flx-s\:6\@xxs {
		flex-shrink : 6;
	}
}
@media(--mq-xxs) {
	.flx-s\:7\@xxs {
		flex-shrink : 7;
	}
}
@media(--mq-xxs) {
	.flx-s\:8\@xxs {
		flex-shrink : 8;
	}
}
@media(--mq-xxs) {
	.flx-s\:9\@xxs {
		flex-shrink : 9;
	}
}
@media(--mq-xxs) {
	.flx-s\:10\@xxs {
		flex-shrink : 10;
	}
}
@media(--mq-xs) {
	.flx-s\:0\@xs {
		flex-shrink : 0;
	}
}
@media(--mq-xs) {
	.flx-s\:1\@xs {
		flex-shrink : 1;
	}
}
@media(--mq-xs) {
	.flx-s\:2\@xs {
		flex-shrink : 2;
	}
}
@media(--mq-xs) {
	.flx-s\:3\@xs {
		flex-shrink : 3;
	}
}
@media(--mq-xs) {
	.flx-s\:4\@xs {
		flex-shrink : 4;
	}
}
@media(--mq-xs) {
	.flx-s\:5\@xs {
		flex-shrink : 5;
	}
}
@media(--mq-xs) {
	.flx-s\:6\@xs {
		flex-shrink : 6;
	}
}
@media(--mq-xs) {
	.flx-s\:7\@xs {
		flex-shrink : 7;
	}
}
@media(--mq-xs) {
	.flx-s\:8\@xs {
		flex-shrink : 8;
	}
}
@media(--mq-xs) {
	.flx-s\:9\@xs {
		flex-shrink : 9;
	}
}
@media(--mq-xs) {
	.flx-s\:10\@xs {
		flex-shrink : 10;
	}
}
@media(--mq-sm) {
	.flx-s\:0\@sm {
		flex-shrink : 0;
	}
}
@media(--mq-sm) {
	.flx-s\:1\@sm {
		flex-shrink : 1;
	}
}
@media(--mq-sm) {
	.flx-s\:2\@sm {
		flex-shrink : 2;
	}
}
@media(--mq-sm) {
	.flx-s\:3\@sm {
		flex-shrink : 3;
	}
}
@media(--mq-sm) {
	.flx-s\:4\@sm {
		flex-shrink : 4;
	}
}
@media(--mq-sm) {
	.flx-s\:5\@sm {
		flex-shrink : 5;
	}
}
@media(--mq-sm) {
	.flx-s\:6\@sm {
		flex-shrink : 6;
	}
}
@media(--mq-sm) {
	.flx-s\:7\@sm {
		flex-shrink : 7;
	}
}
@media(--mq-sm) {
	.flx-s\:8\@sm {
		flex-shrink : 8;
	}
}
@media(--mq-sm) {
	.flx-s\:9\@sm {
		flex-shrink : 9;
	}
}
@media(--mq-sm) {
	.flx-s\:10\@sm {
		flex-shrink : 10;
	}
}
@media(--mq-md) {
	.flx-s\:0\@md {
		flex-shrink : 0;
	}
}
@media(--mq-md) {
	.flx-s\:1\@md {
		flex-shrink : 1;
	}
}
@media(--mq-md) {
	.flx-s\:2\@md {
		flex-shrink : 2;
	}
}
@media(--mq-md) {
	.flx-s\:3\@md {
		flex-shrink : 3;
	}
}
@media(--mq-md) {
	.flx-s\:4\@md {
		flex-shrink : 4;
	}
}
@media(--mq-md) {
	.flx-s\:5\@md {
		flex-shrink : 5;
	}
}
@media(--mq-md) {
	.flx-s\:6\@md {
		flex-shrink : 6;
	}
}
@media(--mq-md) {
	.flx-s\:7\@md {
		flex-shrink : 7;
	}
}
@media(--mq-md) {
	.flx-s\:8\@md {
		flex-shrink : 8;
	}
}
@media(--mq-md) {
	.flx-s\:9\@md {
		flex-shrink : 9;
	}
}
@media(--mq-md) {
	.flx-s\:10\@md {
		flex-shrink : 10;
	}
}
@media(--mq-lg) {
	.flx-s\:0\@lg {
		flex-shrink : 0;
	}
}
@media(--mq-lg) {
	.flx-s\:1\@lg {
		flex-shrink : 1;
	}
}
@media(--mq-lg) {
	.flx-s\:2\@lg {
		flex-shrink : 2;
	}
}
@media(--mq-lg) {
	.flx-s\:3\@lg {
		flex-shrink : 3;
	}
}
@media(--mq-lg) {
	.flx-s\:4\@lg {
		flex-shrink : 4;
	}
}
@media(--mq-lg) {
	.flx-s\:5\@lg {
		flex-shrink : 5;
	}
}
@media(--mq-lg) {
	.flx-s\:6\@lg {
		flex-shrink : 6;
	}
}
@media(--mq-lg) {
	.flx-s\:7\@lg {
		flex-shrink : 7;
	}
}
@media(--mq-lg) {
	.flx-s\:8\@lg {
		flex-shrink : 8;
	}
}
@media(--mq-lg) {
	.flx-s\:9\@lg {
		flex-shrink : 9;
	}
}
@media(--mq-lg) {
	.flx-s\:10\@lg {
		flex-shrink : 10;
	}
}
@media(--mq-xl) {
	.flx-s\:0\@xl {
		flex-shrink : 0;
	}
}
@media(--mq-xl) {
	.flx-s\:1\@xl {
		flex-shrink : 1;
	}
}
@media(--mq-xl) {
	.flx-s\:2\@xl {
		flex-shrink : 2;
	}
}
@media(--mq-xl) {
	.flx-s\:3\@xl {
		flex-shrink : 3;
	}
}
@media(--mq-xl) {
	.flx-s\:4\@xl {
		flex-shrink : 4;
	}
}
@media(--mq-xl) {
	.flx-s\:5\@xl {
		flex-shrink : 5;
	}
}
@media(--mq-xl) {
	.flx-s\:6\@xl {
		flex-shrink : 6;
	}
}
@media(--mq-xl) {
	.flx-s\:7\@xl {
		flex-shrink : 7;
	}
}
@media(--mq-xl) {
	.flx-s\:8\@xl {
		flex-shrink : 8;
	}
}
@media(--mq-xl) {
	.flx-s\:9\@xl {
		flex-shrink : 9;
	}
}
@media(--mq-xl) {
	.flx-s\:10\@xl {
		flex-shrink : 10;
	}
}
@media(--mq-xxl) {
	.flx-s\:0\@xxl {
		flex-shrink : 0;
	}
}
@media(--mq-xxl) {
	.flx-s\:1\@xxl {
		flex-shrink : 1;
	}
}
@media(--mq-xxl) {
	.flx-s\:2\@xxl {
		flex-shrink : 2;
	}
}
@media(--mq-xxl) {
	.flx-s\:3\@xxl {
		flex-shrink : 3;
	}
}
@media(--mq-xxl) {
	.flx-s\:4\@xxl {
		flex-shrink : 4;
	}
}
@media(--mq-xxl) {
	.flx-s\:5\@xxl {
		flex-shrink : 5;
	}
}
@media(--mq-xxl) {
	.flx-s\:6\@xxl {
		flex-shrink : 6;
	}
}
@media(--mq-xxl) {
	.flx-s\:7\@xxl {
		flex-shrink : 7;
	}
}
@media(--mq-xxl) {
	.flx-s\:8\@xxl {
		flex-shrink : 8;
	}
}
@media(--mq-xxl) {
	.flx-s\:9\@xxl {
		flex-shrink : 9;
	}
}
@media(--mq-xxl) {
	.flx-s\:10\@xxl {
		flex-shrink : 10;
	}
}
.flx-b\:a {
	flex-basis : auto;
}
@media(--mq-xxs) {
	.flx-b\:a\@xxs {
		flex-basis : auto;
	}
}
@media(--mq-xs) {
	.flx-b\:a\@xs {
		flex-basis : auto;
	}
}
@media(--mq-sm) {
	.flx-b\:a\@sm {
		flex-basis : auto;
	}
}
@media(--mq-md) {
	.flx-b\:a\@md {
		flex-basis : auto;
	}
}
@media(--mq-lg) {
	.flx-b\:a\@lg {
		flex-basis : auto;
	}
}
@media(--mq-xl) {
	.flx-b\:a\@xl {
		flex-basis : auto;
	}
}
@media(--mq-xxl) {
	.flx-b\:a\@xxl {
		flex-basis : auto;
	}
}
:root {
	--w-sizes: (1of12, 1of10, 1of8, 1of6, 2of12, 1of5, 2of10, 1of4, 2of8, 3of12, 3of10, 1of3, 2of6, 4of12, 3of8, 2of5, 4of10, 5of12, 1of2, 2of4, 3of6, 4of8, 5of10, 6of12, 7of12, 3of5, 6of10, 5of8, 2of3, 4of6, 8of12, 7of10, 3of4, 6of8, 9of12, 4of5, 8of10, 5of6, 10of12, 7of8, 9of10, 11of12, full), (calc(100% * 1 / 12), 10%, 12.5%, calc(100% * 1 / 6), calc(100% * 1 / 6), 20%, 20%, 25%, 25%, 25%, 30%, calc(100% * 1 / 3), calc(100% * 1 / 3), calc(100% * 1 / 3), 37.5%, 40%, 40%, calc(100% * 5 / 12), 50%, 50%, 50%, 50%, 50%, 50%, calc(100% * 7 / 12), 60%, 60%, 62.5%, calc(100% * 2 / 3), calc(100% * 2 / 3), calc(100% * 2 / 3), 70%, 75%, 75%, 75%, 80%, 80%, calc(100% * 5 / 6), calc(100% * 5 / 6), 87.5%, 90%, calc(100% * 11 / 12), 100%);
}
.w\:1of12 {
	width : calc(100% * 1 / 12);
}
.w\:1of10 {
	width : 10%;
}
.w\:1of8 {
	width : 12.5%;
}
.w\:1of6 {
	width : calc(100% * 1 / 6);
}
.w\:2of12 {
	width : calc(100% * 1 / 6);
}
.w\:1of5 {
	width : 20%;
}
.w\:2of10 {
	width : 20%;
}
.w\:1of4 {
	width : 25%;
}
.w\:2of8 {
	width : 25%;
}
.w\:3of12 {
	width : 25%;
}
.w\:3of10 {
	width : 30%;
}
.w\:1of3 {
	width : calc(100% * 1 / 3);
}
.w\:2of6 {
	width : calc(100% * 1 / 3);
}
.w\:4of12 {
	width : calc(100% * 1 / 3);
}
.w\:3of8 {
	width : 37.5%;
}
.w\:2of5 {
	width : 40%;
}
.w\:4of10 {
	width : 40%;
}
.w\:5of12 {
	width : calc(100% * 5 / 12);
}
.w\:1of2 {
	width : 50%;
}
.w\:2of4 {
	width : 50%;
}
.w\:3of6 {
	width : 50%;
}
.w\:4of8 {
	width : 50%;
}
.w\:5of10 {
	width : 50%;
}
.w\:6of12 {
	width : 50%;
}
.w\:7of12 {
	width : calc(100% * 7 / 12);
}
.w\:3of5 {
	width : 60%;
}
.w\:6of10 {
	width : 60%;
}
.w\:5of8 {
	width : 62.5%;
}
.w\:2of3 {
	width : calc(100% * 2 / 3);
}
.w\:4of6 {
	width : calc(100% * 2 / 3);
}
.w\:8of12 {
	width : calc(100% * 2 / 3);
}
.w\:7of10 {
	width : 70%;
}
.w\:3of4 {
	width : 75%;
}
.w\:6of8 {
	width : 75%;
}
.w\:9of12 {
	width : 75%;
}
.w\:4of5 {
	width : 80%;
}
.w\:8of10 {
	width : 80%;
}
.w\:5of6 {
	width : calc(100% * 5 / 6);
}
.w\:10of12 {
	width : calc(100% * 5 / 6);
}
.w\:7of8 {
	width : 87.5%;
}
.w\:9of10 {
	width : 90%;
}
.w\:11of12 {
	width : calc(100% * 11 / 12);
}
.w\:full {
	width : 100%;
}
@media(--mq-xxs) {
	.w\:1of12\@xxs {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-xxs) {
	.w\:1of10\@xxs {
		width : 10%;
	}
}
@media(--mq-xxs) {
	.w\:1of8\@xxs {
		width : 12.5%;
	}
}
@media(--mq-xxs) {
	.w\:1of6\@xxs {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xxs) {
	.w\:2of12\@xxs {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xxs) {
	.w\:1of5\@xxs {
		width : 20%;
	}
}
@media(--mq-xxs) {
	.w\:2of10\@xxs {
		width : 20%;
	}
}
@media(--mq-xxs) {
	.w\:1of4\@xxs {
		width : 25%;
	}
}
@media(--mq-xxs) {
	.w\:2of8\@xxs {
		width : 25%;
	}
}
@media(--mq-xxs) {
	.w\:3of12\@xxs {
		width : 25%;
	}
}
@media(--mq-xxs) {
	.w\:3of10\@xxs {
		width : 30%;
	}
}
@media(--mq-xxs) {
	.w\:1of3\@xxs {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xxs) {
	.w\:2of6\@xxs {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xxs) {
	.w\:4of12\@xxs {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xxs) {
	.w\:3of8\@xxs {
		width : 37.5%;
	}
}
@media(--mq-xxs) {
	.w\:2of5\@xxs {
		width : 40%;
	}
}
@media(--mq-xxs) {
	.w\:4of10\@xxs {
		width : 40%;
	}
}
@media(--mq-xxs) {
	.w\:5of12\@xxs {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-xxs) {
	.w\:1of2\@xxs {
		width : 50%;
	}
}
@media(--mq-xxs) {
	.w\:2of4\@xxs {
		width : 50%;
	}
}
@media(--mq-xxs) {
	.w\:3of6\@xxs {
		width : 50%;
	}
}
@media(--mq-xxs) {
	.w\:4of8\@xxs {
		width : 50%;
	}
}
@media(--mq-xxs) {
	.w\:5of10\@xxs {
		width : 50%;
	}
}
@media(--mq-xxs) {
	.w\:6of12\@xxs {
		width : 50%;
	}
}
@media(--mq-xxs) {
	.w\:7of12\@xxs {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-xxs) {
	.w\:3of5\@xxs {
		width : 60%;
	}
}
@media(--mq-xxs) {
	.w\:6of10\@xxs {
		width : 60%;
	}
}
@media(--mq-xxs) {
	.w\:5of8\@xxs {
		width : 62.5%;
	}
}
@media(--mq-xxs) {
	.w\:2of3\@xxs {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xxs) {
	.w\:4of6\@xxs {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xxs) {
	.w\:8of12\@xxs {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xxs) {
	.w\:7of10\@xxs {
		width : 70%;
	}
}
@media(--mq-xxs) {
	.w\:3of4\@xxs {
		width : 75%;
	}
}
@media(--mq-xxs) {
	.w\:6of8\@xxs {
		width : 75%;
	}
}
@media(--mq-xxs) {
	.w\:9of12\@xxs {
		width : 75%;
	}
}
@media(--mq-xxs) {
	.w\:4of5\@xxs {
		width : 80%;
	}
}
@media(--mq-xxs) {
	.w\:8of10\@xxs {
		width : 80%;
	}
}
@media(--mq-xxs) {
	.w\:5of6\@xxs {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xxs) {
	.w\:10of12\@xxs {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xxs) {
	.w\:7of8\@xxs {
		width : 87.5%;
	}
}
@media(--mq-xxs) {
	.w\:9of10\@xxs {
		width : 90%;
	}
}
@media(--mq-xxs) {
	.w\:11of12\@xxs {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-xxs) {
	.w\:full\@xxs {
		width : 100%;
	}
}
@media(--mq-xs) {
	.w\:1of12\@xs {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-xs) {
	.w\:1of10\@xs {
		width : 10%;
	}
}
@media(--mq-xs) {
	.w\:1of8\@xs {
		width : 12.5%;
	}
}
@media(--mq-xs) {
	.w\:1of6\@xs {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xs) {
	.w\:2of12\@xs {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xs) {
	.w\:1of5\@xs {
		width : 20%;
	}
}
@media(--mq-xs) {
	.w\:2of10\@xs {
		width : 20%;
	}
}
@media(--mq-xs) {
	.w\:1of4\@xs {
		width : 25%;
	}
}
@media(--mq-xs) {
	.w\:2of8\@xs {
		width : 25%;
	}
}
@media(--mq-xs) {
	.w\:3of12\@xs {
		width : 25%;
	}
}
@media(--mq-xs) {
	.w\:3of10\@xs {
		width : 30%;
	}
}
@media(--mq-xs) {
	.w\:1of3\@xs {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xs) {
	.w\:2of6\@xs {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xs) {
	.w\:4of12\@xs {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xs) {
	.w\:3of8\@xs {
		width : 37.5%;
	}
}
@media(--mq-xs) {
	.w\:2of5\@xs {
		width : 40%;
	}
}
@media(--mq-xs) {
	.w\:4of10\@xs {
		width : 40%;
	}
}
@media(--mq-xs) {
	.w\:5of12\@xs {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-xs) {
	.w\:1of2\@xs {
		width : 50%;
	}
}
@media(--mq-xs) {
	.w\:2of4\@xs {
		width : 50%;
	}
}
@media(--mq-xs) {
	.w\:3of6\@xs {
		width : 50%;
	}
}
@media(--mq-xs) {
	.w\:4of8\@xs {
		width : 50%;
	}
}
@media(--mq-xs) {
	.w\:5of10\@xs {
		width : 50%;
	}
}
@media(--mq-xs) {
	.w\:6of12\@xs {
		width : 50%;
	}
}
@media(--mq-xs) {
	.w\:7of12\@xs {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-xs) {
	.w\:3of5\@xs {
		width : 60%;
	}
}
@media(--mq-xs) {
	.w\:6of10\@xs {
		width : 60%;
	}
}
@media(--mq-xs) {
	.w\:5of8\@xs {
		width : 62.5%;
	}
}
@media(--mq-xs) {
	.w\:2of3\@xs {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xs) {
	.w\:4of6\@xs {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xs) {
	.w\:8of12\@xs {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xs) {
	.w\:7of10\@xs {
		width : 70%;
	}
}
@media(--mq-xs) {
	.w\:3of4\@xs {
		width : 75%;
	}
}
@media(--mq-xs) {
	.w\:6of8\@xs {
		width : 75%;
	}
}
@media(--mq-xs) {
	.w\:9of12\@xs {
		width : 75%;
	}
}
@media(--mq-xs) {
	.w\:4of5\@xs {
		width : 80%;
	}
}
@media(--mq-xs) {
	.w\:8of10\@xs {
		width : 80%;
	}
}
@media(--mq-xs) {
	.w\:5of6\@xs {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xs) {
	.w\:10of12\@xs {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xs) {
	.w\:7of8\@xs {
		width : 87.5%;
	}
}
@media(--mq-xs) {
	.w\:9of10\@xs {
		width : 90%;
	}
}
@media(--mq-xs) {
	.w\:11of12\@xs {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-xs) {
	.w\:full\@xs {
		width : 100%;
	}
}
@media(--mq-sm) {
	.w\:1of12\@sm {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-sm) {
	.w\:1of10\@sm {
		width : 10%;
	}
}
@media(--mq-sm) {
	.w\:1of8\@sm {
		width : 12.5%;
	}
}
@media(--mq-sm) {
	.w\:1of6\@sm {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-sm) {
	.w\:2of12\@sm {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-sm) {
	.w\:1of5\@sm {
		width : 20%;
	}
}
@media(--mq-sm) {
	.w\:2of10\@sm {
		width : 20%;
	}
}
@media(--mq-sm) {
	.w\:1of4\@sm {
		width : 25%;
	}
}
@media(--mq-sm) {
	.w\:2of8\@sm {
		width : 25%;
	}
}
@media(--mq-sm) {
	.w\:3of12\@sm {
		width : 25%;
	}
}
@media(--mq-sm) {
	.w\:3of10\@sm {
		width : 30%;
	}
}
@media(--mq-sm) {
	.w\:1of3\@sm {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-sm) {
	.w\:2of6\@sm {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-sm) {
	.w\:4of12\@sm {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-sm) {
	.w\:3of8\@sm {
		width : 37.5%;
	}
}
@media(--mq-sm) {
	.w\:2of5\@sm {
		width : 40%;
	}
}
@media(--mq-sm) {
	.w\:4of10\@sm {
		width : 40%;
	}
}
@media(--mq-sm) {
	.w\:5of12\@sm {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-sm) {
	.w\:1of2\@sm {
		width : 50%;
	}
}
@media(--mq-sm) {
	.w\:2of4\@sm {
		width : 50%;
	}
}
@media(--mq-sm) {
	.w\:3of6\@sm {
		width : 50%;
	}
}
@media(--mq-sm) {
	.w\:4of8\@sm {
		width : 50%;
	}
}
@media(--mq-sm) {
	.w\:5of10\@sm {
		width : 50%;
	}
}
@media(--mq-sm) {
	.w\:6of12\@sm {
		width : 50%;
	}
}
@media(--mq-sm) {
	.w\:7of12\@sm {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-sm) {
	.w\:3of5\@sm {
		width : 60%;
	}
}
@media(--mq-sm) {
	.w\:6of10\@sm {
		width : 60%;
	}
}
@media(--mq-sm) {
	.w\:5of8\@sm {
		width : 62.5%;
	}
}
@media(--mq-sm) {
	.w\:2of3\@sm {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-sm) {
	.w\:4of6\@sm {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-sm) {
	.w\:8of12\@sm {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-sm) {
	.w\:7of10\@sm {
		width : 70%;
	}
}
@media(--mq-sm) {
	.w\:3of4\@sm {
		width : 75%;
	}
}
@media(--mq-sm) {
	.w\:6of8\@sm {
		width : 75%;
	}
}
@media(--mq-sm) {
	.w\:9of12\@sm {
		width : 75%;
	}
}
@media(--mq-sm) {
	.w\:4of5\@sm {
		width : 80%;
	}
}
@media(--mq-sm) {
	.w\:8of10\@sm {
		width : 80%;
	}
}
@media(--mq-sm) {
	.w\:5of6\@sm {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-sm) {
	.w\:10of12\@sm {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-sm) {
	.w\:7of8\@sm {
		width : 87.5%;
	}
}
@media(--mq-sm) {
	.w\:9of10\@sm {
		width : 90%;
	}
}
@media(--mq-sm) {
	.w\:11of12\@sm {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-sm) {
	.w\:full\@sm {
		width : 100%;
	}
}
@media(--mq-md) {
	.w\:1of12\@md {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-md) {
	.w\:1of10\@md {
		width : 10%;
	}
}
@media(--mq-md) {
	.w\:1of8\@md {
		width : 12.5%;
	}
}
@media(--mq-md) {
	.w\:1of6\@md {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-md) {
	.w\:2of12\@md {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-md) {
	.w\:1of5\@md {
		width : 20%;
	}
}
@media(--mq-md) {
	.w\:2of10\@md {
		width : 20%;
	}
}
@media(--mq-md) {
	.w\:1of4\@md {
		width : 25%;
	}
}
@media(--mq-md) {
	.w\:2of8\@md {
		width : 25%;
	}
}
@media(--mq-md) {
	.w\:3of12\@md {
		width : 25%;
	}
}
@media(--mq-md) {
	.w\:3of10\@md {
		width : 30%;
	}
}
@media(--mq-md) {
	.w\:1of3\@md {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-md) {
	.w\:2of6\@md {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-md) {
	.w\:4of12\@md {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-md) {
	.w\:3of8\@md {
		width : 37.5%;
	}
}
@media(--mq-md) {
	.w\:2of5\@md {
		width : 40%;
	}
}
@media(--mq-md) {
	.w\:4of10\@md {
		width : 40%;
	}
}
@media(--mq-md) {
	.w\:5of12\@md {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-md) {
	.w\:1of2\@md {
		width : 50%;
	}
}
@media(--mq-md) {
	.w\:2of4\@md {
		width : 50%;
	}
}
@media(--mq-md) {
	.w\:3of6\@md {
		width : 50%;
	}
}
@media(--mq-md) {
	.w\:4of8\@md {
		width : 50%;
	}
}
@media(--mq-md) {
	.w\:5of10\@md {
		width : 50%;
	}
}
@media(--mq-md) {
	.w\:6of12\@md {
		width : 50%;
	}
}
@media(--mq-md) {
	.w\:7of12\@md {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-md) {
	.w\:3of5\@md {
		width : 60%;
	}
}
@media(--mq-md) {
	.w\:6of10\@md {
		width : 60%;
	}
}
@media(--mq-md) {
	.w\:5of8\@md {
		width : 62.5%;
	}
}
@media(--mq-md) {
	.w\:2of3\@md {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-md) {
	.w\:4of6\@md {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-md) {
	.w\:8of12\@md {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-md) {
	.w\:7of10\@md {
		width : 70%;
	}
}
@media(--mq-md) {
	.w\:3of4\@md {
		width : 75%;
	}
}
@media(--mq-md) {
	.w\:6of8\@md {
		width : 75%;
	}
}
@media(--mq-md) {
	.w\:9of12\@md {
		width : 75%;
	}
}
@media(--mq-md) {
	.w\:4of5\@md {
		width : 80%;
	}
}
@media(--mq-md) {
	.w\:8of10\@md {
		width : 80%;
	}
}
@media(--mq-md) {
	.w\:5of6\@md {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-md) {
	.w\:10of12\@md {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-md) {
	.w\:7of8\@md {
		width : 87.5%;
	}
}
@media(--mq-md) {
	.w\:9of10\@md {
		width : 90%;
	}
}
@media(--mq-md) {
	.w\:11of12\@md {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-md) {
	.w\:full\@md {
		width : 100%;
	}
}
@media(--mq-lg) {
	.w\:1of12\@lg {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-lg) {
	.w\:1of10\@lg {
		width : 10%;
	}
}
@media(--mq-lg) {
	.w\:1of8\@lg {
		width : 12.5%;
	}
}
@media(--mq-lg) {
	.w\:1of6\@lg {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-lg) {
	.w\:2of12\@lg {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-lg) {
	.w\:1of5\@lg {
		width : 20%;
	}
}
@media(--mq-lg) {
	.w\:2of10\@lg {
		width : 20%;
	}
}
@media(--mq-lg) {
	.w\:1of4\@lg {
		width : 25%;
	}
}
@media(--mq-lg) {
	.w\:2of8\@lg {
		width : 25%;
	}
}
@media(--mq-lg) {
	.w\:3of12\@lg {
		width : 25%;
	}
}
@media(--mq-lg) {
	.w\:3of10\@lg {
		width : 30%;
	}
}
@media(--mq-lg) {
	.w\:1of3\@lg {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-lg) {
	.w\:2of6\@lg {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-lg) {
	.w\:4of12\@lg {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-lg) {
	.w\:3of8\@lg {
		width : 37.5%;
	}
}
@media(--mq-lg) {
	.w\:2of5\@lg {
		width : 40%;
	}
}
@media(--mq-lg) {
	.w\:4of10\@lg {
		width : 40%;
	}
}
@media(--mq-lg) {
	.w\:5of12\@lg {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-lg) {
	.w\:1of2\@lg {
		width : 50%;
	}
}
@media(--mq-lg) {
	.w\:2of4\@lg {
		width : 50%;
	}
}
@media(--mq-lg) {
	.w\:3of6\@lg {
		width : 50%;
	}
}
@media(--mq-lg) {
	.w\:4of8\@lg {
		width : 50%;
	}
}
@media(--mq-lg) {
	.w\:5of10\@lg {
		width : 50%;
	}
}
@media(--mq-lg) {
	.w\:6of12\@lg {
		width : 50%;
	}
}
@media(--mq-lg) {
	.w\:7of12\@lg {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-lg) {
	.w\:3of5\@lg {
		width : 60%;
	}
}
@media(--mq-lg) {
	.w\:6of10\@lg {
		width : 60%;
	}
}
@media(--mq-lg) {
	.w\:5of8\@lg {
		width : 62.5%;
	}
}
@media(--mq-lg) {
	.w\:2of3\@lg {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-lg) {
	.w\:4of6\@lg {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-lg) {
	.w\:8of12\@lg {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-lg) {
	.w\:7of10\@lg {
		width : 70%;
	}
}
@media(--mq-lg) {
	.w\:3of4\@lg {
		width : 75%;
	}
}
@media(--mq-lg) {
	.w\:6of8\@lg {
		width : 75%;
	}
}
@media(--mq-lg) {
	.w\:9of12\@lg {
		width : 75%;
	}
}
@media(--mq-lg) {
	.w\:4of5\@lg {
		width : 80%;
	}
}
@media(--mq-lg) {
	.w\:8of10\@lg {
		width : 80%;
	}
}
@media(--mq-lg) {
	.w\:5of6\@lg {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-lg) {
	.w\:10of12\@lg {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-lg) {
	.w\:7of8\@lg {
		width : 87.5%;
	}
}
@media(--mq-lg) {
	.w\:9of10\@lg {
		width : 90%;
	}
}
@media(--mq-lg) {
	.w\:11of12\@lg {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-lg) {
	.w\:full\@lg {
		width : 100%;
	}
}
@media(--mq-xl) {
	.w\:1of12\@xl {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-xl) {
	.w\:1of10\@xl {
		width : 10%;
	}
}
@media(--mq-xl) {
	.w\:1of8\@xl {
		width : 12.5%;
	}
}
@media(--mq-xl) {
	.w\:1of6\@xl {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xl) {
	.w\:2of12\@xl {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xl) {
	.w\:1of5\@xl {
		width : 20%;
	}
}
@media(--mq-xl) {
	.w\:2of10\@xl {
		width : 20%;
	}
}
@media(--mq-xl) {
	.w\:1of4\@xl {
		width : 25%;
	}
}
@media(--mq-xl) {
	.w\:2of8\@xl {
		width : 25%;
	}
}
@media(--mq-xl) {
	.w\:3of12\@xl {
		width : 25%;
	}
}
@media(--mq-xl) {
	.w\:3of10\@xl {
		width : 30%;
	}
}
@media(--mq-xl) {
	.w\:1of3\@xl {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xl) {
	.w\:2of6\@xl {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xl) {
	.w\:4of12\@xl {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xl) {
	.w\:3of8\@xl {
		width : 37.5%;
	}
}
@media(--mq-xl) {
	.w\:2of5\@xl {
		width : 40%;
	}
}
@media(--mq-xl) {
	.w\:4of10\@xl {
		width : 40%;
	}
}
@media(--mq-xl) {
	.w\:5of12\@xl {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-xl) {
	.w\:1of2\@xl {
		width : 50%;
	}
}
@media(--mq-xl) {
	.w\:2of4\@xl {
		width : 50%;
	}
}
@media(--mq-xl) {
	.w\:3of6\@xl {
		width : 50%;
	}
}
@media(--mq-xl) {
	.w\:4of8\@xl {
		width : 50%;
	}
}
@media(--mq-xl) {
	.w\:5of10\@xl {
		width : 50%;
	}
}
@media(--mq-xl) {
	.w\:6of12\@xl {
		width : 50%;
	}
}
@media(--mq-xl) {
	.w\:7of12\@xl {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-xl) {
	.w\:3of5\@xl {
		width : 60%;
	}
}
@media(--mq-xl) {
	.w\:6of10\@xl {
		width : 60%;
	}
}
@media(--mq-xl) {
	.w\:5of8\@xl {
		width : 62.5%;
	}
}
@media(--mq-xl) {
	.w\:2of3\@xl {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xl) {
	.w\:4of6\@xl {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xl) {
	.w\:8of12\@xl {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xl) {
	.w\:7of10\@xl {
		width : 70%;
	}
}
@media(--mq-xl) {
	.w\:3of4\@xl {
		width : 75%;
	}
}
@media(--mq-xl) {
	.w\:6of8\@xl {
		width : 75%;
	}
}
@media(--mq-xl) {
	.w\:9of12\@xl {
		width : 75%;
	}
}
@media(--mq-xl) {
	.w\:4of5\@xl {
		width : 80%;
	}
}
@media(--mq-xl) {
	.w\:8of10\@xl {
		width : 80%;
	}
}
@media(--mq-xl) {
	.w\:5of6\@xl {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xl) {
	.w\:10of12\@xl {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xl) {
	.w\:7of8\@xl {
		width : 87.5%;
	}
}
@media(--mq-xl) {
	.w\:9of10\@xl {
		width : 90%;
	}
}
@media(--mq-xl) {
	.w\:11of12\@xl {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-xl) {
	.w\:full\@xl {
		width : 100%;
	}
}
@media(--mq-xxl) {
	.w\:1of12\@xxl {
		width : calc(100% * 1 / 12);
	}
}
@media(--mq-xxl) {
	.w\:1of10\@xxl {
		width : 10%;
	}
}
@media(--mq-xxl) {
	.w\:1of8\@xxl {
		width : 12.5%;
	}
}
@media(--mq-xxl) {
	.w\:1of6\@xxl {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xxl) {
	.w\:2of12\@xxl {
		width : calc(100% * 1 / 6);
	}
}
@media(--mq-xxl) {
	.w\:1of5\@xxl {
		width : 20%;
	}
}
@media(--mq-xxl) {
	.w\:2of10\@xxl {
		width : 20%;
	}
}
@media(--mq-xxl) {
	.w\:1of4\@xxl {
		width : 25%;
	}
}
@media(--mq-xxl) {
	.w\:2of8\@xxl {
		width : 25%;
	}
}
@media(--mq-xxl) {
	.w\:3of12\@xxl {
		width : 25%;
	}
}
@media(--mq-xxl) {
	.w\:3of10\@xxl {
		width : 30%;
	}
}
@media(--mq-xxl) {
	.w\:1of3\@xxl {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xxl) {
	.w\:2of6\@xxl {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xxl) {
	.w\:4of12\@xxl {
		width : calc(100% * 1 / 3);
	}
}
@media(--mq-xxl) {
	.w\:3of8\@xxl {
		width : 37.5%;
	}
}
@media(--mq-xxl) {
	.w\:2of5\@xxl {
		width : 40%;
	}
}
@media(--mq-xxl) {
	.w\:4of10\@xxl {
		width : 40%;
	}
}
@media(--mq-xxl) {
	.w\:5of12\@xxl {
		width : calc(100% * 5 / 12);
	}
}
@media(--mq-xxl) {
	.w\:1of2\@xxl {
		width : 50%;
	}
}
@media(--mq-xxl) {
	.w\:2of4\@xxl {
		width : 50%;
	}
}
@media(--mq-xxl) {
	.w\:3of6\@xxl {
		width : 50%;
	}
}
@media(--mq-xxl) {
	.w\:4of8\@xxl {
		width : 50%;
	}
}
@media(--mq-xxl) {
	.w\:5of10\@xxl {
		width : 50%;
	}
}
@media(--mq-xxl) {
	.w\:6of12\@xxl {
		width : 50%;
	}
}
@media(--mq-xxl) {
	.w\:7of12\@xxl {
		width : calc(100% * 7 / 12);
	}
}
@media(--mq-xxl) {
	.w\:3of5\@xxl {
		width : 60%;
	}
}
@media(--mq-xxl) {
	.w\:6of10\@xxl {
		width : 60%;
	}
}
@media(--mq-xxl) {
	.w\:5of8\@xxl {
		width : 62.5%;
	}
}
@media(--mq-xxl) {
	.w\:2of3\@xxl {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xxl) {
	.w\:4of6\@xxl {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xxl) {
	.w\:8of12\@xxl {
		width : calc(100% * 2 / 3);
	}
}
@media(--mq-xxl) {
	.w\:7of10\@xxl {
		width : 70%;
	}
}
@media(--mq-xxl) {
	.w\:3of4\@xxl {
		width : 75%;
	}
}
@media(--mq-xxl) {
	.w\:6of8\@xxl {
		width : 75%;
	}
}
@media(--mq-xxl) {
	.w\:9of12\@xxl {
		width : 75%;
	}
}
@media(--mq-xxl) {
	.w\:4of5\@xxl {
		width : 80%;
	}
}
@media(--mq-xxl) {
	.w\:8of10\@xxl {
		width : 80%;
	}
}
@media(--mq-xxl) {
	.w\:5of6\@xxl {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xxl) {
	.w\:10of12\@xxl {
		width : calc(100% * 5 / 6);
	}
}
@media(--mq-xxl) {
	.w\:7of8\@xxl {
		width : 87.5%;
	}
}
@media(--mq-xxl) {
	.w\:9of10\@xxl {
		width : 90%;
	}
}
@media(--mq-xxl) {
	.w\:11of12\@xxl {
		width : calc(100% * 11 / 12);
	}
}
@media(--mq-xxl) {
	.w\:full\@xxl {
		width : 100%;
	}
}
.h\:full {
	height : 100%;
}
.h\:\.1 {
	height : var(--z-dot1);
}
.h\:\.2 {
	height : var(--z-dot2);
}
.h\:\.3 {
	height : var(--z-dot3);
}
.h\:\.4 {
	height : var(--z-dot4);
}
.h\:\.5 {
	height : var(--z-dot5);
}
.h\:\.6 {
	height : var(--z-dot6);
}
.h\:\.7 {
	height : var(--z-dot7);
}
.h\:\.8 {
	height : var(--z-dot8);
}
.h\:\.9 {
	height : var(--z-dot9);
}
.h\:0 {
	height : var(--z0);
}
.h\:1 {
	height : var(--z1);
}
.h\:2 {
	height : var(--z2);
}
.h\:3 {
	height : var(--z3);
}
.h\:4 {
	height : var(--z4);
}
.h\:5 {
	height : var(--z5);
}
.h\:6 {
	height : var(--z6);
}
.h\:7 {
	height : var(--z7);
}
.h\:8 {
	height : var(--z8);
}
.h\:9 {
	height : var(--z9);
}
.h\:10 {
	height : var(--z10);
}
@media (--mq-xxs) {
	.h\:full\@xxs {
		height : 100%;
	}
	.h\:\.1\@xxs {
		height : var(--z-dot1);
	}
	.h\:\.2\@xxs {
		height : var(--z-dot2);
	}
	.h\:\.3\@xxs {
		height : var(--z-dot3);
	}
	.h\:\.4\@xxs {
		height : var(--z-dot4);
	}
	.h\:\.5\@xxs {
		height : var(--z-dot5);
	}
	.h\:\.6\@xxs {
		height : var(--z-dot6);
	}
	.h\:\.7\@xxs {
		height : var(--z-dot7);
	}
	.h\:\.8\@xxs {
		height : var(--z-dot8);
	}
	.h\:\.9\@xxs {
		height : var(--z-dot9);
	}
	.h\:0\@xxs {
		height : var(--z0);
	}
	.h\:1\@xxs {
		height : var(--z1);
	}
	.h\:2\@xxs {
		height : var(--z2);
	}
	.h\:3\@xxs {
		height : var(--z3);
	}
	.h\:4\@xxs {
		height : var(--z4);
	}
	.h\:5\@xxs {
		height : var(--z5);
	}
	.h\:6\@xxs {
		height : var(--z6);
	}
	.h\:7\@xxs {
		height : var(--z7);
	}
	.h\:8\@xxs {
		height : var(--z8);
	}
	.h\:9\@xxs {
		height : var(--z9);
	}
	.h\:10\@xxs {
		height : var(--z10);
	}
}
@media (--mq-xs) {
	.h\:full\@xs {
		height : 100%;
	}
	.h\:\.1\@xs {
		height : var(--z-dot1);
	}
	.h\:\.2\@xs {
		height : var(--z-dot2);
	}
	.h\:\.3\@xs {
		height : var(--z-dot3);
	}
	.h\:\.4\@xs {
		height : var(--z-dot4);
	}
	.h\:\.5\@xs {
		height : var(--z-dot5);
	}
	.h\:\.6\@xs {
		height : var(--z-dot6);
	}
	.h\:\.7\@xs {
		height : var(--z-dot7);
	}
	.h\:\.8\@xs {
		height : var(--z-dot8);
	}
	.h\:\.9\@xs {
		height : var(--z-dot9);
	}
	.h\:0\@xs {
		height : var(--z0);
	}
	.h\:1\@xs {
		height : var(--z1);
	}
	.h\:2\@xs {
		height : var(--z2);
	}
	.h\:3\@xs {
		height : var(--z3);
	}
	.h\:4\@xs {
		height : var(--z4);
	}
	.h\:5\@xs {
		height : var(--z5);
	}
	.h\:6\@xs {
		height : var(--z6);
	}
	.h\:7\@xs {
		height : var(--z7);
	}
	.h\:8\@xs {
		height : var(--z8);
	}
	.h\:9\@xs {
		height : var(--z9);
	}
	.h\:10\@xs {
		height : var(--z10);
	}
}
@media (--mq-sm) {
	.h\:full\@sm {
		height : 100%;
	}
	.h\:\.1\@sm {
		height : var(--z-dot1);
	}
	.h\:\.2\@sm {
		height : var(--z-dot2);
	}
	.h\:\.3\@sm {
		height : var(--z-dot3);
	}
	.h\:\.4\@sm {
		height : var(--z-dot4);
	}
	.h\:\.5\@sm {
		height : var(--z-dot5);
	}
	.h\:\.6\@sm {
		height : var(--z-dot6);
	}
	.h\:\.7\@sm {
		height : var(--z-dot7);
	}
	.h\:\.8\@sm {
		height : var(--z-dot8);
	}
	.h\:\.9\@sm {
		height : var(--z-dot9);
	}
	.h\:0\@sm {
		height : var(--z0);
	}
	.h\:1\@sm {
		height : var(--z1);
	}
	.h\:2\@sm {
		height : var(--z2);
	}
	.h\:3\@sm {
		height : var(--z3);
	}
	.h\:4\@sm {
		height : var(--z4);
	}
	.h\:5\@sm {
		height : var(--z5);
	}
	.h\:6\@sm {
		height : var(--z6);
	}
	.h\:7\@sm {
		height : var(--z7);
	}
	.h\:8\@sm {
		height : var(--z8);
	}
	.h\:9\@sm {
		height : var(--z9);
	}
	.h\:10\@sm {
		height : var(--z10);
	}
}
@media (--mq-md) {
	.h\:full\@md {
		height : 100%;
	}
	.h\:\.1\@md {
		height : var(--z-dot1);
	}
	.h\:\.2\@md {
		height : var(--z-dot2);
	}
	.h\:\.3\@md {
		height : var(--z-dot3);
	}
	.h\:\.4\@md {
		height : var(--z-dot4);
	}
	.h\:\.5\@md {
		height : var(--z-dot5);
	}
	.h\:\.6\@md {
		height : var(--z-dot6);
	}
	.h\:\.7\@md {
		height : var(--z-dot7);
	}
	.h\:\.8\@md {
		height : var(--z-dot8);
	}
	.h\:\.9\@md {
		height : var(--z-dot9);
	}
	.h\:0\@md {
		height : var(--z0);
	}
	.h\:1\@md {
		height : var(--z1);
	}
	.h\:2\@md {
		height : var(--z2);
	}
	.h\:3\@md {
		height : var(--z3);
	}
	.h\:4\@md {
		height : var(--z4);
	}
	.h\:5\@md {
		height : var(--z5);
	}
	.h\:6\@md {
		height : var(--z6);
	}
	.h\:7\@md {
		height : var(--z7);
	}
	.h\:8\@md {
		height : var(--z8);
	}
	.h\:9\@md {
		height : var(--z9);
	}
	.h\:10\@md {
		height : var(--z10);
	}
}
@media (--mq-lg) {
	.h\:full\@lg {
		height : 100%;
	}
	.h\:\.1\@lg {
		height : var(--z-dot1);
	}
	.h\:\.2\@lg {
		height : var(--z-dot2);
	}
	.h\:\.3\@lg {
		height : var(--z-dot3);
	}
	.h\:\.4\@lg {
		height : var(--z-dot4);
	}
	.h\:\.5\@lg {
		height : var(--z-dot5);
	}
	.h\:\.6\@lg {
		height : var(--z-dot6);
	}
	.h\:\.7\@lg {
		height : var(--z-dot7);
	}
	.h\:\.8\@lg {
		height : var(--z-dot8);
	}
	.h\:\.9\@lg {
		height : var(--z-dot9);
	}
	.h\:0\@lg {
		height : var(--z0);
	}
	.h\:1\@lg {
		height : var(--z1);
	}
	.h\:2\@lg {
		height : var(--z2);
	}
	.h\:3\@lg {
		height : var(--z3);
	}
	.h\:4\@lg {
		height : var(--z4);
	}
	.h\:5\@lg {
		height : var(--z5);
	}
	.h\:6\@lg {
		height : var(--z6);
	}
	.h\:7\@lg {
		height : var(--z7);
	}
	.h\:8\@lg {
		height : var(--z8);
	}
	.h\:9\@lg {
		height : var(--z9);
	}
	.h\:10\@lg {
		height : var(--z10);
	}
}
@media (--mq-xl) {
	.h\:full\@xl {
		height : 100%;
	}
	.h\:\.1\@xl {
		height : var(--z-dot1);
	}
	.h\:\.2\@xl {
		height : var(--z-dot2);
	}
	.h\:\.3\@xl {
		height : var(--z-dot3);
	}
	.h\:\.4\@xl {
		height : var(--z-dot4);
	}
	.h\:\.5\@xl {
		height : var(--z-dot5);
	}
	.h\:\.6\@xl {
		height : var(--z-dot6);
	}
	.h\:\.7\@xl {
		height : var(--z-dot7);
	}
	.h\:\.8\@xl {
		height : var(--z-dot8);
	}
	.h\:\.9\@xl {
		height : var(--z-dot9);
	}
	.h\:0\@xl {
		height : var(--z0);
	}
	.h\:1\@xl {
		height : var(--z1);
	}
	.h\:2\@xl {
		height : var(--z2);
	}
	.h\:3\@xl {
		height : var(--z3);
	}
	.h\:4\@xl {
		height : var(--z4);
	}
	.h\:5\@xl {
		height : var(--z5);
	}
	.h\:6\@xl {
		height : var(--z6);
	}
	.h\:7\@xl {
		height : var(--z7);
	}
	.h\:8\@xl {
		height : var(--z8);
	}
	.h\:9\@xl {
		height : var(--z9);
	}
	.h\:10\@xl {
		height : var(--z10);
	}
}
@media (--mq-xxl) {
	.h\:full\@xxl {
		height : 100%;
	}
	.h\:\.1\@xxl {
		height : var(--z-dot1);
	}
	.h\:\.2\@xxl {
		height : var(--z-dot2);
	}
	.h\:\.3\@xxl {
		height : var(--z-dot3);
	}
	.h\:\.4\@xxl {
		height : var(--z-dot4);
	}
	.h\:\.5\@xxl {
		height : var(--z-dot5);
	}
	.h\:\.6\@xxl {
		height : var(--z-dot6);
	}
	.h\:\.7\@xxl {
		height : var(--z-dot7);
	}
	.h\:\.8\@xxl {
		height : var(--z-dot8);
	}
	.h\:\.9\@xxl {
		height : var(--z-dot9);
	}
	.h\:0\@xxl {
		height : var(--z0);
	}
	.h\:1\@xxl {
		height : var(--z1);
	}
	.h\:2\@xxl {
		height : var(--z2);
	}
	.h\:3\@xxl {
		height : var(--z3);
	}
	.h\:4\@xxl {
		height : var(--z4);
	}
	.h\:5\@xxl {
		height : var(--z5);
	}
	.h\:6\@xxl {
		height : var(--z6);
	}
	.h\:7\@xxl {
		height : var(--z7);
	}
	.h\:8\@xxl {
		height : var(--z8);
	}
	.h\:9\@xxl {
		height : var(--z9);
	}
	.h\:10\@xxl {
		height : var(--z10);
	}
}
:root {
	--l-h: (d, t, n, l), (1, var(--z2), var(--z1), var(--z4));
}
/*---
				title: $(short)
				section: Line Height
				---

				```html
				<div class=".l-h:$(short)">l-h:$(short)</span>
				```
			*/
.l-h\:d {
	line-height : var(--l-h--default);
}
/*---
				title: $(short)
				section: Line Height
				---

				```html
				<div class=".l-h:$(short)">l-h:$(short)</span>
				```
			*/
.l-h\:t {
	line-height : var(--l-h--tight);
}
/*---
				title: $(short)
				section: Line Height
				---

				```html
				<div class=".l-h:$(short)">l-h:$(short)</span>
				```
			*/
.l-h\:n {
	line-height : var(--l-h--normal);
}
/*---
				title: $(short)
				section: Line Height
				---

				```html
				<div class=".l-h:$(short)">l-h:$(short)</span>
				```
			*/
.l-h\:l {
	line-height : var(--l-h--loose);
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@xxs {
		line-height : var(--l-h--default);
	}
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@xxs {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@xxs {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@xxs {
		line-height : var(--l-h--loose);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@xs {
		line-height : var(--l-h--default);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@xs {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@xs {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@xs {
		line-height : var(--l-h--loose);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@sm {
		line-height : var(--l-h--default);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@sm {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@sm {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@sm {
		line-height : var(--l-h--loose);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@md {
		line-height : var(--l-h--default);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@md {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@md {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@md {
		line-height : var(--l-h--loose);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@lg {
		line-height : var(--l-h--default);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@lg {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@lg {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@lg {
		line-height : var(--l-h--loose);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@xl {
		line-height : var(--l-h--default);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@xl {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@xl {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@xl {
		line-height : var(--l-h--loose);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:d\@xxl {
		line-height : var(--l-h--default);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:t\@xxl {
		line-height : var(--l-h--tight);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:n\@xxl {
		line-height : var(--l-h--normal);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Line Height
					---

					```html
					<div class=".l-h:$(short)@$(mq)">l-h:$(short)@$(mq)</span>
					```
				*/
	.l-h\:l\@xxl {
		line-height : var(--l-h--loose);
	}
}
:root {
	--l-s: (d, t, n, l), (var(--l-s--default), var(--l-s--tight), var(--l-s--normal), var(--l-s--loose));
}
/*---
				title: $(short)
				section: Letter Spacing
				---

				```html
				<div class=".l-s:$(short)">l-s:$(short)</span>
				```
			*/
.l-s\:d {
	letter-spacing : var(--l-s--default);
}
/*---
				title: $(short)
				section: Letter Spacing
				---

				```html
				<div class=".l-s:$(short)">l-s:$(short)</span>
				```
			*/
.l-s\:t {
	letter-spacing : var(--l-s--tight);
}
/*---
				title: $(short)
				section: Letter Spacing
				---

				```html
				<div class=".l-s:$(short)">l-s:$(short)</span>
				```
			*/
.l-s\:n {
	letter-spacing : var(--l-s--normal);
}
/*---
				title: $(short)
				section: Letter Spacing
				---

				```html
				<div class=".l-s:$(short)">l-s:$(short)</span>
				```
			*/
.l-s\:l {
	letter-spacing : var(--l-s--loose);
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@xxs {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@xxs {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@xxs {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-xxs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@xxs {
		letter-spacing : var(--l-s--loose);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@xs {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@xs {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@xs {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-xs) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@xs {
		letter-spacing : var(--l-s--loose);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@sm {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@sm {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@sm {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-sm) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@sm {
		letter-spacing : var(--l-s--loose);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@md {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@md {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@md {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-md) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@md {
		letter-spacing : var(--l-s--loose);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@lg {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@lg {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@lg {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-lg) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@lg {
		letter-spacing : var(--l-s--loose);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@xl {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@xl {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@xl {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-xl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@xl {
		letter-spacing : var(--l-s--loose);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:d\@xxl {
		letter-spacing : var(--l-s--default);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:t\@xxl {
		letter-spacing : var(--l-s--tight);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:n\@xxl {
		letter-spacing : var(--l-s--normal);
	}
}
@media(--mq-xxl) {
	/*---
					title: $(short)
					section: Letter Spacing
					---

					```html
					<div class=".l-s:$(short)@$(mq)">l-s:$(short)@$(mq)</span>
					```
				*/
	.l-s\:l\@xxl {
		letter-spacing : var(--l-s--loose);
	}
}
:root {
	--pseudo-states: n, active, focus, hover, visited;
	--t-d: (n, u, l-t), (none, underline, line-through);
}
.t-d\:n {
	text-decoration : none;
}
.t-d\:u {
	text-decoration : underline;
}
.t-d\:l-t {
	text-decoration : line-through;
}
.active\/t-d\:n {
	@nest &:active {
		text-decoration : none;
	}
}
.active\/t-d\:u {
	@nest &:active {
		text-decoration : underline;
	}
}
.active\/t-d\:l-t {
	@nest &:active {
		text-decoration : line-through;
	}
}
.focus\/t-d\:n {
	@nest &:focus {
		text-decoration : none;
	}
}
.focus\/t-d\:u {
	@nest &:focus {
		text-decoration : underline;
	}
}
.focus\/t-d\:l-t {
	@nest &:focus {
		text-decoration : line-through;
	}
}
.hover\/t-d\:n {
	@nest &:hover {
		text-decoration : none;
	}
}
.hover\/t-d\:u {
	@nest &:hover {
		text-decoration : underline;
	}
}
.hover\/t-d\:l-t {
	@nest &:hover {
		text-decoration : line-through;
	}
}
.visited\/t-d\:n {
	@nest &:visited {
		text-decoration : none;
	}
}
.visited\/t-d\:u {
	@nest &:visited {
		text-decoration : underline;
	}
}
.visited\/t-d\:l-t {
	@nest &:visited {
		text-decoration : line-through;
	}
}
@media(--mq-xxs) {
	.t-d\:n\@xxs {
		text-decoration : none;
	}
}
@media(--mq-xxs) {
	.t-d\:u\@xxs {
		text-decoration : underline;
	}
}
@media(--mq-xxs) {
	.t-d\:l-t\@xxs {
		text-decoration : line-through;
	}
}
@media(--mq-xxs) {
	.active\/t-d\:n\@xxs {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-xxs) {
	.active\/t-d\:u\@xxs {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxs) {
	.active\/t-d\:l-t\@xxs {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxs) {
	.focus\/t-d\:n\@xxs {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-xxs) {
	.focus\/t-d\:u\@xxs {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxs) {
	.focus\/t-d\:l-t\@xxs {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxs) {
	.hover\/t-d\:n\@xxs {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-xxs) {
	.hover\/t-d\:u\@xxs {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxs) {
	.hover\/t-d\:l-t\@xxs {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxs) {
	.visited\/t-d\:n\@xxs {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-xxs) {
	.visited\/t-d\:u\@xxs {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxs) {
	.visited\/t-d\:l-t\@xxs {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xs) {
	.t-d\:n\@xs {
		text-decoration : none;
	}
}
@media(--mq-xs) {
	.t-d\:u\@xs {
		text-decoration : underline;
	}
}
@media(--mq-xs) {
	.t-d\:l-t\@xs {
		text-decoration : line-through;
	}
}
@media(--mq-xs) {
	.active\/t-d\:n\@xs {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-xs) {
	.active\/t-d\:u\@xs {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-xs) {
	.active\/t-d\:l-t\@xs {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xs) {
	.focus\/t-d\:n\@xs {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-xs) {
	.focus\/t-d\:u\@xs {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-xs) {
	.focus\/t-d\:l-t\@xs {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xs) {
	.hover\/t-d\:n\@xs {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-xs) {
	.hover\/t-d\:u\@xs {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-xs) {
	.hover\/t-d\:l-t\@xs {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xs) {
	.visited\/t-d\:n\@xs {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-xs) {
	.visited\/t-d\:u\@xs {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-xs) {
	.visited\/t-d\:l-t\@xs {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
@media(--mq-sm) {
	.t-d\:n\@sm {
		text-decoration : none;
	}
}
@media(--mq-sm) {
	.t-d\:u\@sm {
		text-decoration : underline;
	}
}
@media(--mq-sm) {
	.t-d\:l-t\@sm {
		text-decoration : line-through;
	}
}
@media(--mq-sm) {
	.active\/t-d\:n\@sm {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-sm) {
	.active\/t-d\:u\@sm {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-sm) {
	.active\/t-d\:l-t\@sm {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-sm) {
	.focus\/t-d\:n\@sm {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-sm) {
	.focus\/t-d\:u\@sm {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-sm) {
	.focus\/t-d\:l-t\@sm {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-sm) {
	.hover\/t-d\:n\@sm {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-sm) {
	.hover\/t-d\:u\@sm {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-sm) {
	.hover\/t-d\:l-t\@sm {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-sm) {
	.visited\/t-d\:n\@sm {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-sm) {
	.visited\/t-d\:u\@sm {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-sm) {
	.visited\/t-d\:l-t\@sm {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
@media(--mq-md) {
	.t-d\:n\@md {
		text-decoration : none;
	}
}
@media(--mq-md) {
	.t-d\:u\@md {
		text-decoration : underline;
	}
}
@media(--mq-md) {
	.t-d\:l-t\@md {
		text-decoration : line-through;
	}
}
@media(--mq-md) {
	.active\/t-d\:n\@md {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-md) {
	.active\/t-d\:u\@md {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-md) {
	.active\/t-d\:l-t\@md {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-md) {
	.focus\/t-d\:n\@md {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-md) {
	.focus\/t-d\:u\@md {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-md) {
	.focus\/t-d\:l-t\@md {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-md) {
	.hover\/t-d\:n\@md {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-md) {
	.hover\/t-d\:u\@md {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-md) {
	.hover\/t-d\:l-t\@md {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-md) {
	.visited\/t-d\:n\@md {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-md) {
	.visited\/t-d\:u\@md {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-md) {
	.visited\/t-d\:l-t\@md {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
@media(--mq-lg) {
	.t-d\:n\@lg {
		text-decoration : none;
	}
}
@media(--mq-lg) {
	.t-d\:u\@lg {
		text-decoration : underline;
	}
}
@media(--mq-lg) {
	.t-d\:l-t\@lg {
		text-decoration : line-through;
	}
}
@media(--mq-lg) {
	.active\/t-d\:n\@lg {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-lg) {
	.active\/t-d\:u\@lg {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-lg) {
	.active\/t-d\:l-t\@lg {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-lg) {
	.focus\/t-d\:n\@lg {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-lg) {
	.focus\/t-d\:u\@lg {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-lg) {
	.focus\/t-d\:l-t\@lg {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-lg) {
	.hover\/t-d\:n\@lg {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-lg) {
	.hover\/t-d\:u\@lg {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-lg) {
	.hover\/t-d\:l-t\@lg {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-lg) {
	.visited\/t-d\:n\@lg {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-lg) {
	.visited\/t-d\:u\@lg {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-lg) {
	.visited\/t-d\:l-t\@lg {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xl) {
	.t-d\:n\@xl {
		text-decoration : none;
	}
}
@media(--mq-xl) {
	.t-d\:u\@xl {
		text-decoration : underline;
	}
}
@media(--mq-xl) {
	.t-d\:l-t\@xl {
		text-decoration : line-through;
	}
}
@media(--mq-xl) {
	.active\/t-d\:n\@xl {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-xl) {
	.active\/t-d\:u\@xl {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-xl) {
	.active\/t-d\:l-t\@xl {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xl) {
	.focus\/t-d\:n\@xl {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-xl) {
	.focus\/t-d\:u\@xl {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-xl) {
	.focus\/t-d\:l-t\@xl {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xl) {
	.hover\/t-d\:n\@xl {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-xl) {
	.hover\/t-d\:u\@xl {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-xl) {
	.hover\/t-d\:l-t\@xl {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xl) {
	.visited\/t-d\:n\@xl {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-xl) {
	.visited\/t-d\:u\@xl {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-xl) {
	.visited\/t-d\:l-t\@xl {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxl) {
	.t-d\:n\@xxl {
		text-decoration : none;
	}
}
@media(--mq-xxl) {
	.t-d\:u\@xxl {
		text-decoration : underline;
	}
}
@media(--mq-xxl) {
	.t-d\:l-t\@xxl {
		text-decoration : line-through;
	}
}
@media(--mq-xxl) {
	.active\/t-d\:n\@xxl {
		@nest &:active {
			text-decoration : none;
		}
	}
}
@media(--mq-xxl) {
	.active\/t-d\:u\@xxl {
		@nest &:active {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxl) {
	.active\/t-d\:l-t\@xxl {
		@nest &:active {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxl) {
	.focus\/t-d\:n\@xxl {
		@nest &:focus {
			text-decoration : none;
		}
	}
}
@media(--mq-xxl) {
	.focus\/t-d\:u\@xxl {
		@nest &:focus {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxl) {
	.focus\/t-d\:l-t\@xxl {
		@nest &:focus {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxl) {
	.hover\/t-d\:n\@xxl {
		@nest &:hover {
			text-decoration : none;
		}
	}
}
@media(--mq-xxl) {
	.hover\/t-d\:u\@xxl {
		@nest &:hover {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxl) {
	.hover\/t-d\:l-t\@xxl {
		@nest &:hover {
			text-decoration : line-through;
		}
	}
}
@media(--mq-xxl) {
	.visited\/t-d\:n\@xxl {
		@nest &:visited {
			text-decoration : none;
		}
	}
}
@media(--mq-xxl) {
	.visited\/t-d\:u\@xxl {
		@nest &:visited {
			text-decoration : underline;
		}
	}
}
@media(--mq-xxl) {
	.visited\/t-d\:l-t\@xxl {
		@nest &:visited {
			text-decoration : line-through;
		}
	}
}
:root {
	--o-types: (hidden, visible, scroll, auto), (h, v, s, a);
}
/*---
				title: $(prop)
				section: Overflow
				---

				```html
				<div class=".o:$(short)">o:$(short)</span>
				```
			*/
.o\:h {
	overflow : hidden;
}
/*---
				title: $(prop)
				section: Overflow
				---

				```html
				<div class=".o:$(short)">o:$(short)</span>
				```
			*/
.o\:v {
	overflow : visible;
}
/*---
				title: $(prop)
				section: Overflow
				---

				```html
				<div class=".o:$(short)">o:$(short)</span>
				```
			*/
.o\:s {
	overflow : scroll;
}
/*---
				title: $(prop)
				section: Overflow
				---

				```html
				<div class=".o:$(short)">o:$(short)</span>
				```
			*/
.o\:a {
	overflow : auto;
}
/*---
				title: $(prop)
				section: Overflow X
				---

				```html
				<div class=".o-x:$(short)">o-x:$(short)</span>
				```
			*/
.o-x\:h {
	overflow-x : hidden;
}
/*---
				title: $(prop)
				section: Overflow X
				---

				```html
				<div class=".o-x:$(short)">o-x:$(short)</span>
				```
			*/
.o-x\:v {
	overflow-x : visible;
}
/*---
				title: $(prop)
				section: Overflow X
				---

				```html
				<div class=".o-x:$(short)">o-x:$(short)</span>
				```
			*/
.o-x\:s {
	overflow-x : scroll;
}
/*---
				title: $(prop)
				section: Overflow X
				---

				```html
				<div class=".o-x:$(short)">o-x:$(short)</span>
				```
			*/
.o-x\:a {
	overflow-x : auto;
}
/*---
				title: $(prop)
				section:  Overflow Y
				---

				```html
				<div class=".o-y:$(short)">o-y:$(short)</span>
				```
			*/
.o-y\:h {
	overflow-y : hidden;
}
/*---
				title: $(prop)
				section:  Overflow Y
				---

				```html
				<div class=".o-y:$(short)">o-y:$(short)</span>
				```
			*/
.o-y\:v {
	overflow-y : visible;
}
/*---
				title: $(prop)
				section:  Overflow Y
				---

				```html
				<div class=".o-y:$(short)">o-y:$(short)</span>
				```
			*/
.o-y\:s {
	overflow-y : scroll;
}
/*---
				title: $(prop)
				section:  Overflow Y
				---

				```html
				<div class=".o-y:$(short)">o-y:$(short)</span>
				```
			*/
.o-y\:a {
	overflow-y : auto;
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@xxs {
		overflow : hidden;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@xxs {
		overflow : visible;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@xxs {
		overflow : scroll;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@xxs {
		overflow : auto;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@xxs {
		overflow-x : hidden;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@xxs {
		overflow-x : visible;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@xxs {
		overflow-x : scroll;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@xxs {
		overflow-x : auto;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@xxs {
		overflow-y : hidden;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@xxs {
		overflow-y : visible;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@xxs {
		overflow-y : scroll;
	}
}
@media(--mq-xxs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@xxs {
		overflow-y : auto;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@xs {
		overflow : hidden;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@xs {
		overflow : visible;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@xs {
		overflow : scroll;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@xs {
		overflow : auto;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@xs {
		overflow-x : hidden;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@xs {
		overflow-x : visible;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@xs {
		overflow-x : scroll;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@xs {
		overflow-x : auto;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@xs {
		overflow-y : hidden;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@xs {
		overflow-y : visible;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@xs {
		overflow-y : scroll;
	}
}
@media(--mq-xs) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@xs {
		overflow-y : auto;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@sm {
		overflow : hidden;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@sm {
		overflow : visible;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@sm {
		overflow : scroll;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@sm {
		overflow : auto;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@sm {
		overflow-x : hidden;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@sm {
		overflow-x : visible;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@sm {
		overflow-x : scroll;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@sm {
		overflow-x : auto;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@sm {
		overflow-y : hidden;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@sm {
		overflow-y : visible;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@sm {
		overflow-y : scroll;
	}
}
@media(--mq-sm) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@sm {
		overflow-y : auto;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@md {
		overflow : hidden;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@md {
		overflow : visible;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@md {
		overflow : scroll;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@md {
		overflow : auto;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@md {
		overflow-x : hidden;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@md {
		overflow-x : visible;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@md {
		overflow-x : scroll;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@md {
		overflow-x : auto;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@md {
		overflow-y : hidden;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@md {
		overflow-y : visible;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@md {
		overflow-y : scroll;
	}
}
@media(--mq-md) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@md {
		overflow-y : auto;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@lg {
		overflow : hidden;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@lg {
		overflow : visible;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@lg {
		overflow : scroll;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@lg {
		overflow : auto;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@lg {
		overflow-x : hidden;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@lg {
		overflow-x : visible;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@lg {
		overflow-x : scroll;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@lg {
		overflow-x : auto;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@lg {
		overflow-y : hidden;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@lg {
		overflow-y : visible;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@lg {
		overflow-y : scroll;
	}
}
@media(--mq-lg) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@lg {
		overflow-y : auto;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@xl {
		overflow : hidden;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@xl {
		overflow : visible;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@xl {
		overflow : scroll;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@xl {
		overflow : auto;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@xl {
		overflow-x : hidden;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@xl {
		overflow-x : visible;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@xl {
		overflow-x : scroll;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@xl {
		overflow-x : auto;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@xl {
		overflow-y : hidden;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@xl {
		overflow-y : visible;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@xl {
		overflow-y : scroll;
	}
}
@media(--mq-xl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@xl {
		overflow-y : auto;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:h\@xxl {
		overflow : hidden;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:v\@xxl {
		overflow : visible;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:s\@xxl {
		overflow : scroll;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow
					---

					```html
					<div class=".o:$(short)@$(mq)">o:$(short)@$(mq)</span>
					```
				*/
	.o\:a\@xxl {
		overflow : auto;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:h\@xxl {
		overflow-x : hidden;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:v\@xxl {
		overflow-x : visible;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:s\@xxl {
		overflow-x : scroll;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section: Overflow X
					---

					```html
					<div class=".o-x:$(short)@$(mq)">o-x:$(short)@$(mq)</span>
					```
				*/
	.o-x\:a\@xxl {
		overflow-x : auto;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:h\@xxl {
		overflow-y : hidden;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:v\@xxl {
		overflow-y : visible;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:s\@xxl {
		overflow-y : scroll;
	}
}
@media(--mq-xxl) {
	/*---
					title: $(prop)
					section:  Overflow Y
					---

					```html
					<div class=".o-y:$(short)@$(mq)">o-y:$(short)@$(mq)</span>
					```
				*/
	.o-y\:a\@xxl {
		overflow-y : auto;
	}
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.1 {
	border-radius : var(--z-dot1);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.2 {
	border-radius : var(--z-dot2);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.3 {
	border-radius : var(--z-dot3);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.4 {
	border-radius : var(--z-dot4);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.5 {
	border-radius : var(--z-dot5);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.6 {
	border-radius : var(--z-dot6);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.7 {
	border-radius : var(--z-dot7);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.8 {
	border-radius : var(--z-dot8);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:\.9 {
	border-radius : var(--z-dot9);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:0 {
	border-radius : var(--z0);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:1 {
	border-radius : var(--z1);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:2 {
	border-radius : var(--z2);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:3 {
	border-radius : var(--z3);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:4 {
	border-radius : var(--z4);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:5 {
	border-radius : var(--z5);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:6 {
	border-radius : var(--z6);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:7 {
	border-radius : var(--z7);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:8 {
	border-radius : var(--z8);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:9 {
	border-radius : var(--z9);
}
/*---
		title: all
		section: Border Radius
		---

		```html
		<div class="b-r:$(z)">b-r:$(z)</span>
		```
	*/
.b-r\:10 {
	border-radius : var(--z10);
}
:root {
	--pos-options: (absolute, relative, static, fixed, cover), (a, r, s, f, c);
}
.pos\:a {
	position : absolute;
}
.pos\:r {
	position : relative;
}
.pos\:s {
	position : static;
}
.pos\:f {
	position : fixed;
}
.pos\:c {
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
}
@media (--mq-xxs) {
	.pos\:a\@xxs {
		position : absolute;
	}
	.pos\:r\@xxs {
		position : relative;
	}
	.pos\:s\@xxs {
		position : static;
	}
	.pos\:f\@xxs {
		position : fixed;
	}
	.pos\:c\@xxs {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
@media (--mq-xs) {
	.pos\:a\@xs {
		position : absolute;
	}
	.pos\:r\@xs {
		position : relative;
	}
	.pos\:s\@xs {
		position : static;
	}
	.pos\:f\@xs {
		position : fixed;
	}
	.pos\:c\@xs {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
@media (--mq-sm) {
	.pos\:a\@sm {
		position : absolute;
	}
	.pos\:r\@sm {
		position : relative;
	}
	.pos\:s\@sm {
		position : static;
	}
	.pos\:f\@sm {
		position : fixed;
	}
	.pos\:c\@sm {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
@media (--mq-md) {
	.pos\:a\@md {
		position : absolute;
	}
	.pos\:r\@md {
		position : relative;
	}
	.pos\:s\@md {
		position : static;
	}
	.pos\:f\@md {
		position : fixed;
	}
	.pos\:c\@md {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
@media (--mq-lg) {
	.pos\:a\@lg {
		position : absolute;
	}
	.pos\:r\@lg {
		position : relative;
	}
	.pos\:s\@lg {
		position : static;
	}
	.pos\:f\@lg {
		position : fixed;
	}
	.pos\:c\@lg {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
@media (--mq-xl) {
	.pos\:a\@xl {
		position : absolute;
	}
	.pos\:r\@xl {
		position : relative;
	}
	.pos\:s\@xl {
		position : static;
	}
	.pos\:f\@xl {
		position : fixed;
	}
	.pos\:c\@xl {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
@media (--mq-xxl) {
	.pos\:a\@xxl {
		position : absolute;
	}
	.pos\:r\@xxl {
		position : relative;
	}
	.pos\:s\@xxl {
		position : static;
	}
	.pos\:f\@xxl {
		position : fixed;
	}
	.pos\:c\@xxl {
		top : 0;
		bottom : 0;
		left : 0;
		right : 0;
	}
}
:root {
	--sides-options: (top, bottom, left, right);
}
.top {
	top : 100%;
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.1 {
	top : var(--z-dot1);
}
.top\:-\.1 {
	top : -var(--z-dot1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.2 {
	top : var(--z-dot2);
}
.top\:-\.2 {
	top : -var(--z-dot2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.3 {
	top : var(--z-dot3);
}
.top\:-\.3 {
	top : -var(--z-dot3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.4 {
	top : var(--z-dot4);
}
.top\:-\.4 {
	top : -var(--z-dot4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.5 {
	top : var(--z-dot5);
}
.top\:-\.5 {
	top : -var(--z-dot5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.6 {
	top : var(--z-dot6);
}
.top\:-\.6 {
	top : -var(--z-dot6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.7 {
	top : var(--z-dot7);
}
.top\:-\.7 {
	top : -var(--z-dot7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.8 {
	top : var(--z-dot8);
}
.top\:-\.8 {
	top : -var(--z-dot8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:\.9 {
	top : var(--z-dot9);
}
.top\:-\.9 {
	top : -var(--z-dot9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:0 {
	top : var(--z0);
}
.top\:-0 {
	top : -var(--z0);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:1 {
	top : var(--z1);
}
.top\:-1 {
	top : -var(--z1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:2 {
	top : var(--z2);
}
.top\:-2 {
	top : -var(--z2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:3 {
	top : var(--z3);
}
.top\:-3 {
	top : -var(--z3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:4 {
	top : var(--z4);
}
.top\:-4 {
	top : -var(--z4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:5 {
	top : var(--z5);
}
.top\:-5 {
	top : -var(--z5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:6 {
	top : var(--z6);
}
.top\:-6 {
	top : -var(--z6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:7 {
	top : var(--z7);
}
.top\:-7 {
	top : -var(--z7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:8 {
	top : var(--z8);
}
.top\:-8 {
	top : -var(--z8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:9 {
	top : var(--z9);
}
.top\:-9 {
	top : -var(--z9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.top\:10 {
	top : var(--z10);
}
.top\:-10 {
	top : -var(--z10);
}
.bottom {
	bottom : 100%;
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.1 {
	bottom : var(--z-dot1);
}
.bottom\:-\.1 {
	bottom : -var(--z-dot1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.2 {
	bottom : var(--z-dot2);
}
.bottom\:-\.2 {
	bottom : -var(--z-dot2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.3 {
	bottom : var(--z-dot3);
}
.bottom\:-\.3 {
	bottom : -var(--z-dot3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.4 {
	bottom : var(--z-dot4);
}
.bottom\:-\.4 {
	bottom : -var(--z-dot4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.5 {
	bottom : var(--z-dot5);
}
.bottom\:-\.5 {
	bottom : -var(--z-dot5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.6 {
	bottom : var(--z-dot6);
}
.bottom\:-\.6 {
	bottom : -var(--z-dot6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.7 {
	bottom : var(--z-dot7);
}
.bottom\:-\.7 {
	bottom : -var(--z-dot7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.8 {
	bottom : var(--z-dot8);
}
.bottom\:-\.8 {
	bottom : -var(--z-dot8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:\.9 {
	bottom : var(--z-dot9);
}
.bottom\:-\.9 {
	bottom : -var(--z-dot9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:0 {
	bottom : var(--z0);
}
.bottom\:-0 {
	bottom : -var(--z0);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:1 {
	bottom : var(--z1);
}
.bottom\:-1 {
	bottom : -var(--z1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:2 {
	bottom : var(--z2);
}
.bottom\:-2 {
	bottom : -var(--z2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:3 {
	bottom : var(--z3);
}
.bottom\:-3 {
	bottom : -var(--z3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:4 {
	bottom : var(--z4);
}
.bottom\:-4 {
	bottom : -var(--z4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:5 {
	bottom : var(--z5);
}
.bottom\:-5 {
	bottom : -var(--z5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:6 {
	bottom : var(--z6);
}
.bottom\:-6 {
	bottom : -var(--z6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:7 {
	bottom : var(--z7);
}
.bottom\:-7 {
	bottom : -var(--z7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:8 {
	bottom : var(--z8);
}
.bottom\:-8 {
	bottom : -var(--z8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:9 {
	bottom : var(--z9);
}
.bottom\:-9 {
	bottom : -var(--z9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.bottom\:10 {
	bottom : var(--z10);
}
.bottom\:-10 {
	bottom : -var(--z10);
}
.left {
	left : 100%;
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.1 {
	left : var(--z-dot1);
}
.left\:-\.1 {
	left : -var(--z-dot1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.2 {
	left : var(--z-dot2);
}
.left\:-\.2 {
	left : -var(--z-dot2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.3 {
	left : var(--z-dot3);
}
.left\:-\.3 {
	left : -var(--z-dot3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.4 {
	left : var(--z-dot4);
}
.left\:-\.4 {
	left : -var(--z-dot4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.5 {
	left : var(--z-dot5);
}
.left\:-\.5 {
	left : -var(--z-dot5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.6 {
	left : var(--z-dot6);
}
.left\:-\.6 {
	left : -var(--z-dot6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.7 {
	left : var(--z-dot7);
}
.left\:-\.7 {
	left : -var(--z-dot7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.8 {
	left : var(--z-dot8);
}
.left\:-\.8 {
	left : -var(--z-dot8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:\.9 {
	left : var(--z-dot9);
}
.left\:-\.9 {
	left : -var(--z-dot9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:0 {
	left : var(--z0);
}
.left\:-0 {
	left : -var(--z0);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:1 {
	left : var(--z1);
}
.left\:-1 {
	left : -var(--z1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:2 {
	left : var(--z2);
}
.left\:-2 {
	left : -var(--z2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:3 {
	left : var(--z3);
}
.left\:-3 {
	left : -var(--z3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:4 {
	left : var(--z4);
}
.left\:-4 {
	left : -var(--z4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:5 {
	left : var(--z5);
}
.left\:-5 {
	left : -var(--z5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:6 {
	left : var(--z6);
}
.left\:-6 {
	left : -var(--z6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:7 {
	left : var(--z7);
}
.left\:-7 {
	left : -var(--z7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:8 {
	left : var(--z8);
}
.left\:-8 {
	left : -var(--z8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:9 {
	left : var(--z9);
}
.left\:-9 {
	left : -var(--z9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.left\:10 {
	left : var(--z10);
}
.left\:-10 {
	left : -var(--z10);
}
.right {
	right : 100%;
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.1 {
	right : var(--z-dot1);
}
.right\:-\.1 {
	right : -var(--z-dot1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.2 {
	right : var(--z-dot2);
}
.right\:-\.2 {
	right : -var(--z-dot2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.3 {
	right : var(--z-dot3);
}
.right\:-\.3 {
	right : -var(--z-dot3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.4 {
	right : var(--z-dot4);
}
.right\:-\.4 {
	right : -var(--z-dot4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.5 {
	right : var(--z-dot5);
}
.right\:-\.5 {
	right : -var(--z-dot5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.6 {
	right : var(--z-dot6);
}
.right\:-\.6 {
	right : -var(--z-dot6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.7 {
	right : var(--z-dot7);
}
.right\:-\.7 {
	right : -var(--z-dot7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.8 {
	right : var(--z-dot8);
}
.right\:-\.8 {
	right : -var(--z-dot8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:\.9 {
	right : var(--z-dot9);
}
.right\:-\.9 {
	right : -var(--z-dot9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:0 {
	right : var(--z0);
}
.right\:-0 {
	right : -var(--z0);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:1 {
	right : var(--z1);
}
.right\:-1 {
	right : -var(--z1);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:2 {
	right : var(--z2);
}
.right\:-2 {
	right : -var(--z2);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:3 {
	right : var(--z3);
}
.right\:-3 {
	right : -var(--z3);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:4 {
	right : var(--z4);
}
.right\:-4 {
	right : -var(--z4);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:5 {
	right : var(--z5);
}
.right\:-5 {
	right : -var(--z5);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:6 {
	right : var(--z6);
}
.right\:-6 {
	right : -var(--z6);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:7 {
	right : var(--z7);
}
.right\:-7 {
	right : -var(--z7);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:8 {
	right : var(--z8);
}
.right\:-8 {
	right : -var(--z8);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:9 {
	right : var(--z9);
}
.right\:-9 {
	right : -var(--z9);
}
/*---
					title: Position $(
					section: Side
					---

					```html
					<span class="$(pos):$(z)">$(pos):$(z)</span>
					```
				*/
.right\:10 {
	right : var(--z10);
}
.right\:-10 {
	right : -var(--z10);
}
@media (--mq-xxs) {
	.top\@xxs {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@xxs {
		top : var(--z-dot1);
	}
	.top\:-\.1\@xxs {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@xxs {
		top : var(--z-dot2);
	}
	.top\:-\.2\@xxs {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@xxs {
		top : var(--z-dot3);
	}
	.top\:-\.3\@xxs {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@xxs {
		top : var(--z-dot4);
	}
	.top\:-\.4\@xxs {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@xxs {
		top : var(--z-dot5);
	}
	.top\:-\.5\@xxs {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@xxs {
		top : var(--z-dot6);
	}
	.top\:-\.6\@xxs {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@xxs {
		top : var(--z-dot7);
	}
	.top\:-\.7\@xxs {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@xxs {
		top : var(--z-dot8);
	}
	.top\:-\.8\@xxs {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@xxs {
		top : var(--z-dot9);
	}
	.top\:-\.9\@xxs {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@xxs {
		top : var(--z0);
	}
	.top\:-0\@xxs {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@xxs {
		top : var(--z1);
	}
	.top\:-1\@xxs {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@xxs {
		top : var(--z2);
	}
	.top\:-2\@xxs {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@xxs {
		top : var(--z3);
	}
	.top\:-3\@xxs {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@xxs {
		top : var(--z4);
	}
	.top\:-4\@xxs {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@xxs {
		top : var(--z5);
	}
	.top\:-5\@xxs {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@xxs {
		top : var(--z6);
	}
	.top\:-6\@xxs {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@xxs {
		top : var(--z7);
	}
	.top\:-7\@xxs {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@xxs {
		top : var(--z8);
	}
	.top\:-8\@xxs {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@xxs {
		top : var(--z9);
	}
	.top\:-9\@xxs {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@xxs {
		top : var(--z10);
	}
	.top\:-10\@xxs {
		top : -var(--z10);
	}
}
@media (--mq-xxs) {
	.bottom\@xxs {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@xxs {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@xxs {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@xxs {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@xxs {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@xxs {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@xxs {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@xxs {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@xxs {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@xxs {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@xxs {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@xxs {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@xxs {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@xxs {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@xxs {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@xxs {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@xxs {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@xxs {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@xxs {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@xxs {
		bottom : var(--z0);
	}
	.bottom\:-0\@xxs {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@xxs {
		bottom : var(--z1);
	}
	.bottom\:-1\@xxs {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@xxs {
		bottom : var(--z2);
	}
	.bottom\:-2\@xxs {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@xxs {
		bottom : var(--z3);
	}
	.bottom\:-3\@xxs {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@xxs {
		bottom : var(--z4);
	}
	.bottom\:-4\@xxs {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@xxs {
		bottom : var(--z5);
	}
	.bottom\:-5\@xxs {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@xxs {
		bottom : var(--z6);
	}
	.bottom\:-6\@xxs {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@xxs {
		bottom : var(--z7);
	}
	.bottom\:-7\@xxs {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@xxs {
		bottom : var(--z8);
	}
	.bottom\:-8\@xxs {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@xxs {
		bottom : var(--z9);
	}
	.bottom\:-9\@xxs {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@xxs {
		bottom : var(--z10);
	}
	.bottom\:-10\@xxs {
		bottom : -var(--z10);
	}
}
@media (--mq-xxs) {
	.left\@xxs {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@xxs {
		left : var(--z-dot1);
	}
	.left\:-\.1\@xxs {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@xxs {
		left : var(--z-dot2);
	}
	.left\:-\.2\@xxs {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@xxs {
		left : var(--z-dot3);
	}
	.left\:-\.3\@xxs {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@xxs {
		left : var(--z-dot4);
	}
	.left\:-\.4\@xxs {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@xxs {
		left : var(--z-dot5);
	}
	.left\:-\.5\@xxs {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@xxs {
		left : var(--z-dot6);
	}
	.left\:-\.6\@xxs {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@xxs {
		left : var(--z-dot7);
	}
	.left\:-\.7\@xxs {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@xxs {
		left : var(--z-dot8);
	}
	.left\:-\.8\@xxs {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@xxs {
		left : var(--z-dot9);
	}
	.left\:-\.9\@xxs {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@xxs {
		left : var(--z0);
	}
	.left\:-0\@xxs {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@xxs {
		left : var(--z1);
	}
	.left\:-1\@xxs {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@xxs {
		left : var(--z2);
	}
	.left\:-2\@xxs {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@xxs {
		left : var(--z3);
	}
	.left\:-3\@xxs {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@xxs {
		left : var(--z4);
	}
	.left\:-4\@xxs {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@xxs {
		left : var(--z5);
	}
	.left\:-5\@xxs {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@xxs {
		left : var(--z6);
	}
	.left\:-6\@xxs {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@xxs {
		left : var(--z7);
	}
	.left\:-7\@xxs {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@xxs {
		left : var(--z8);
	}
	.left\:-8\@xxs {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@xxs {
		left : var(--z9);
	}
	.left\:-9\@xxs {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@xxs {
		left : var(--z10);
	}
	.left\:-10\@xxs {
		left : -var(--z10);
	}
}
@media (--mq-xxs) {
	.right\@xxs {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@xxs {
		right : var(--z-dot1);
	}
	.right\:-\.1\@xxs {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@xxs {
		right : var(--z-dot2);
	}
	.right\:-\.2\@xxs {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@xxs {
		right : var(--z-dot3);
	}
	.right\:-\.3\@xxs {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@xxs {
		right : var(--z-dot4);
	}
	.right\:-\.4\@xxs {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@xxs {
		right : var(--z-dot5);
	}
	.right\:-\.5\@xxs {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@xxs {
		right : var(--z-dot6);
	}
	.right\:-\.6\@xxs {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@xxs {
		right : var(--z-dot7);
	}
	.right\:-\.7\@xxs {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@xxs {
		right : var(--z-dot8);
	}
	.right\:-\.8\@xxs {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@xxs {
		right : var(--z-dot9);
	}
	.right\:-\.9\@xxs {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@xxs {
		right : var(--z0);
	}
	.right\:-0\@xxs {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@xxs {
		right : var(--z1);
	}
	.right\:-1\@xxs {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@xxs {
		right : var(--z2);
	}
	.right\:-2\@xxs {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@xxs {
		right : var(--z3);
	}
	.right\:-3\@xxs {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@xxs {
		right : var(--z4);
	}
	.right\:-4\@xxs {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@xxs {
		right : var(--z5);
	}
	.right\:-5\@xxs {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@xxs {
		right : var(--z6);
	}
	.right\:-6\@xxs {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@xxs {
		right : var(--z7);
	}
	.right\:-7\@xxs {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@xxs {
		right : var(--z8);
	}
	.right\:-8\@xxs {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@xxs {
		right : var(--z9);
	}
	.right\:-9\@xxs {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@xxs {
		right : var(--z10);
	}
	.right\:-10\@xxs {
		right : -var(--z10);
	}
}
@media (--mq-xs) {
	.top\@xs {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@xs {
		top : var(--z-dot1);
	}
	.top\:-\.1\@xs {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@xs {
		top : var(--z-dot2);
	}
	.top\:-\.2\@xs {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@xs {
		top : var(--z-dot3);
	}
	.top\:-\.3\@xs {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@xs {
		top : var(--z-dot4);
	}
	.top\:-\.4\@xs {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@xs {
		top : var(--z-dot5);
	}
	.top\:-\.5\@xs {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@xs {
		top : var(--z-dot6);
	}
	.top\:-\.6\@xs {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@xs {
		top : var(--z-dot7);
	}
	.top\:-\.7\@xs {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@xs {
		top : var(--z-dot8);
	}
	.top\:-\.8\@xs {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@xs {
		top : var(--z-dot9);
	}
	.top\:-\.9\@xs {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@xs {
		top : var(--z0);
	}
	.top\:-0\@xs {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@xs {
		top : var(--z1);
	}
	.top\:-1\@xs {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@xs {
		top : var(--z2);
	}
	.top\:-2\@xs {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@xs {
		top : var(--z3);
	}
	.top\:-3\@xs {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@xs {
		top : var(--z4);
	}
	.top\:-4\@xs {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@xs {
		top : var(--z5);
	}
	.top\:-5\@xs {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@xs {
		top : var(--z6);
	}
	.top\:-6\@xs {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@xs {
		top : var(--z7);
	}
	.top\:-7\@xs {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@xs {
		top : var(--z8);
	}
	.top\:-8\@xs {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@xs {
		top : var(--z9);
	}
	.top\:-9\@xs {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@xs {
		top : var(--z10);
	}
	.top\:-10\@xs {
		top : -var(--z10);
	}
}
@media (--mq-xs) {
	.bottom\@xs {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@xs {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@xs {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@xs {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@xs {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@xs {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@xs {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@xs {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@xs {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@xs {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@xs {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@xs {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@xs {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@xs {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@xs {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@xs {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@xs {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@xs {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@xs {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@xs {
		bottom : var(--z0);
	}
	.bottom\:-0\@xs {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@xs {
		bottom : var(--z1);
	}
	.bottom\:-1\@xs {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@xs {
		bottom : var(--z2);
	}
	.bottom\:-2\@xs {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@xs {
		bottom : var(--z3);
	}
	.bottom\:-3\@xs {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@xs {
		bottom : var(--z4);
	}
	.bottom\:-4\@xs {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@xs {
		bottom : var(--z5);
	}
	.bottom\:-5\@xs {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@xs {
		bottom : var(--z6);
	}
	.bottom\:-6\@xs {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@xs {
		bottom : var(--z7);
	}
	.bottom\:-7\@xs {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@xs {
		bottom : var(--z8);
	}
	.bottom\:-8\@xs {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@xs {
		bottom : var(--z9);
	}
	.bottom\:-9\@xs {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@xs {
		bottom : var(--z10);
	}
	.bottom\:-10\@xs {
		bottom : -var(--z10);
	}
}
@media (--mq-xs) {
	.left\@xs {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@xs {
		left : var(--z-dot1);
	}
	.left\:-\.1\@xs {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@xs {
		left : var(--z-dot2);
	}
	.left\:-\.2\@xs {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@xs {
		left : var(--z-dot3);
	}
	.left\:-\.3\@xs {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@xs {
		left : var(--z-dot4);
	}
	.left\:-\.4\@xs {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@xs {
		left : var(--z-dot5);
	}
	.left\:-\.5\@xs {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@xs {
		left : var(--z-dot6);
	}
	.left\:-\.6\@xs {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@xs {
		left : var(--z-dot7);
	}
	.left\:-\.7\@xs {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@xs {
		left : var(--z-dot8);
	}
	.left\:-\.8\@xs {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@xs {
		left : var(--z-dot9);
	}
	.left\:-\.9\@xs {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@xs {
		left : var(--z0);
	}
	.left\:-0\@xs {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@xs {
		left : var(--z1);
	}
	.left\:-1\@xs {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@xs {
		left : var(--z2);
	}
	.left\:-2\@xs {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@xs {
		left : var(--z3);
	}
	.left\:-3\@xs {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@xs {
		left : var(--z4);
	}
	.left\:-4\@xs {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@xs {
		left : var(--z5);
	}
	.left\:-5\@xs {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@xs {
		left : var(--z6);
	}
	.left\:-6\@xs {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@xs {
		left : var(--z7);
	}
	.left\:-7\@xs {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@xs {
		left : var(--z8);
	}
	.left\:-8\@xs {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@xs {
		left : var(--z9);
	}
	.left\:-9\@xs {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@xs {
		left : var(--z10);
	}
	.left\:-10\@xs {
		left : -var(--z10);
	}
}
@media (--mq-xs) {
	.right\@xs {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@xs {
		right : var(--z-dot1);
	}
	.right\:-\.1\@xs {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@xs {
		right : var(--z-dot2);
	}
	.right\:-\.2\@xs {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@xs {
		right : var(--z-dot3);
	}
	.right\:-\.3\@xs {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@xs {
		right : var(--z-dot4);
	}
	.right\:-\.4\@xs {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@xs {
		right : var(--z-dot5);
	}
	.right\:-\.5\@xs {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@xs {
		right : var(--z-dot6);
	}
	.right\:-\.6\@xs {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@xs {
		right : var(--z-dot7);
	}
	.right\:-\.7\@xs {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@xs {
		right : var(--z-dot8);
	}
	.right\:-\.8\@xs {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@xs {
		right : var(--z-dot9);
	}
	.right\:-\.9\@xs {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@xs {
		right : var(--z0);
	}
	.right\:-0\@xs {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@xs {
		right : var(--z1);
	}
	.right\:-1\@xs {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@xs {
		right : var(--z2);
	}
	.right\:-2\@xs {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@xs {
		right : var(--z3);
	}
	.right\:-3\@xs {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@xs {
		right : var(--z4);
	}
	.right\:-4\@xs {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@xs {
		right : var(--z5);
	}
	.right\:-5\@xs {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@xs {
		right : var(--z6);
	}
	.right\:-6\@xs {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@xs {
		right : var(--z7);
	}
	.right\:-7\@xs {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@xs {
		right : var(--z8);
	}
	.right\:-8\@xs {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@xs {
		right : var(--z9);
	}
	.right\:-9\@xs {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@xs {
		right : var(--z10);
	}
	.right\:-10\@xs {
		right : -var(--z10);
	}
}
@media (--mq-sm) {
	.top\@sm {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@sm {
		top : var(--z-dot1);
	}
	.top\:-\.1\@sm {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@sm {
		top : var(--z-dot2);
	}
	.top\:-\.2\@sm {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@sm {
		top : var(--z-dot3);
	}
	.top\:-\.3\@sm {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@sm {
		top : var(--z-dot4);
	}
	.top\:-\.4\@sm {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@sm {
		top : var(--z-dot5);
	}
	.top\:-\.5\@sm {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@sm {
		top : var(--z-dot6);
	}
	.top\:-\.6\@sm {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@sm {
		top : var(--z-dot7);
	}
	.top\:-\.7\@sm {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@sm {
		top : var(--z-dot8);
	}
	.top\:-\.8\@sm {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@sm {
		top : var(--z-dot9);
	}
	.top\:-\.9\@sm {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@sm {
		top : var(--z0);
	}
	.top\:-0\@sm {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@sm {
		top : var(--z1);
	}
	.top\:-1\@sm {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@sm {
		top : var(--z2);
	}
	.top\:-2\@sm {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@sm {
		top : var(--z3);
	}
	.top\:-3\@sm {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@sm {
		top : var(--z4);
	}
	.top\:-4\@sm {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@sm {
		top : var(--z5);
	}
	.top\:-5\@sm {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@sm {
		top : var(--z6);
	}
	.top\:-6\@sm {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@sm {
		top : var(--z7);
	}
	.top\:-7\@sm {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@sm {
		top : var(--z8);
	}
	.top\:-8\@sm {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@sm {
		top : var(--z9);
	}
	.top\:-9\@sm {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@sm {
		top : var(--z10);
	}
	.top\:-10\@sm {
		top : -var(--z10);
	}
}
@media (--mq-sm) {
	.bottom\@sm {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@sm {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@sm {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@sm {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@sm {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@sm {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@sm {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@sm {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@sm {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@sm {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@sm {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@sm {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@sm {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@sm {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@sm {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@sm {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@sm {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@sm {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@sm {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@sm {
		bottom : var(--z0);
	}
	.bottom\:-0\@sm {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@sm {
		bottom : var(--z1);
	}
	.bottom\:-1\@sm {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@sm {
		bottom : var(--z2);
	}
	.bottom\:-2\@sm {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@sm {
		bottom : var(--z3);
	}
	.bottom\:-3\@sm {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@sm {
		bottom : var(--z4);
	}
	.bottom\:-4\@sm {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@sm {
		bottom : var(--z5);
	}
	.bottom\:-5\@sm {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@sm {
		bottom : var(--z6);
	}
	.bottom\:-6\@sm {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@sm {
		bottom : var(--z7);
	}
	.bottom\:-7\@sm {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@sm {
		bottom : var(--z8);
	}
	.bottom\:-8\@sm {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@sm {
		bottom : var(--z9);
	}
	.bottom\:-9\@sm {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@sm {
		bottom : var(--z10);
	}
	.bottom\:-10\@sm {
		bottom : -var(--z10);
	}
}
@media (--mq-sm) {
	.left\@sm {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@sm {
		left : var(--z-dot1);
	}
	.left\:-\.1\@sm {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@sm {
		left : var(--z-dot2);
	}
	.left\:-\.2\@sm {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@sm {
		left : var(--z-dot3);
	}
	.left\:-\.3\@sm {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@sm {
		left : var(--z-dot4);
	}
	.left\:-\.4\@sm {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@sm {
		left : var(--z-dot5);
	}
	.left\:-\.5\@sm {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@sm {
		left : var(--z-dot6);
	}
	.left\:-\.6\@sm {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@sm {
		left : var(--z-dot7);
	}
	.left\:-\.7\@sm {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@sm {
		left : var(--z-dot8);
	}
	.left\:-\.8\@sm {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@sm {
		left : var(--z-dot9);
	}
	.left\:-\.9\@sm {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@sm {
		left : var(--z0);
	}
	.left\:-0\@sm {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@sm {
		left : var(--z1);
	}
	.left\:-1\@sm {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@sm {
		left : var(--z2);
	}
	.left\:-2\@sm {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@sm {
		left : var(--z3);
	}
	.left\:-3\@sm {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@sm {
		left : var(--z4);
	}
	.left\:-4\@sm {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@sm {
		left : var(--z5);
	}
	.left\:-5\@sm {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@sm {
		left : var(--z6);
	}
	.left\:-6\@sm {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@sm {
		left : var(--z7);
	}
	.left\:-7\@sm {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@sm {
		left : var(--z8);
	}
	.left\:-8\@sm {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@sm {
		left : var(--z9);
	}
	.left\:-9\@sm {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@sm {
		left : var(--z10);
	}
	.left\:-10\@sm {
		left : -var(--z10);
	}
}
@media (--mq-sm) {
	.right\@sm {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@sm {
		right : var(--z-dot1);
	}
	.right\:-\.1\@sm {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@sm {
		right : var(--z-dot2);
	}
	.right\:-\.2\@sm {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@sm {
		right : var(--z-dot3);
	}
	.right\:-\.3\@sm {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@sm {
		right : var(--z-dot4);
	}
	.right\:-\.4\@sm {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@sm {
		right : var(--z-dot5);
	}
	.right\:-\.5\@sm {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@sm {
		right : var(--z-dot6);
	}
	.right\:-\.6\@sm {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@sm {
		right : var(--z-dot7);
	}
	.right\:-\.7\@sm {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@sm {
		right : var(--z-dot8);
	}
	.right\:-\.8\@sm {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@sm {
		right : var(--z-dot9);
	}
	.right\:-\.9\@sm {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@sm {
		right : var(--z0);
	}
	.right\:-0\@sm {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@sm {
		right : var(--z1);
	}
	.right\:-1\@sm {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@sm {
		right : var(--z2);
	}
	.right\:-2\@sm {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@sm {
		right : var(--z3);
	}
	.right\:-3\@sm {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@sm {
		right : var(--z4);
	}
	.right\:-4\@sm {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@sm {
		right : var(--z5);
	}
	.right\:-5\@sm {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@sm {
		right : var(--z6);
	}
	.right\:-6\@sm {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@sm {
		right : var(--z7);
	}
	.right\:-7\@sm {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@sm {
		right : var(--z8);
	}
	.right\:-8\@sm {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@sm {
		right : var(--z9);
	}
	.right\:-9\@sm {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@sm {
		right : var(--z10);
	}
	.right\:-10\@sm {
		right : -var(--z10);
	}
}
@media (--mq-md) {
	.top\@md {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@md {
		top : var(--z-dot1);
	}
	.top\:-\.1\@md {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@md {
		top : var(--z-dot2);
	}
	.top\:-\.2\@md {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@md {
		top : var(--z-dot3);
	}
	.top\:-\.3\@md {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@md {
		top : var(--z-dot4);
	}
	.top\:-\.4\@md {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@md {
		top : var(--z-dot5);
	}
	.top\:-\.5\@md {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@md {
		top : var(--z-dot6);
	}
	.top\:-\.6\@md {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@md {
		top : var(--z-dot7);
	}
	.top\:-\.7\@md {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@md {
		top : var(--z-dot8);
	}
	.top\:-\.8\@md {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@md {
		top : var(--z-dot9);
	}
	.top\:-\.9\@md {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@md {
		top : var(--z0);
	}
	.top\:-0\@md {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@md {
		top : var(--z1);
	}
	.top\:-1\@md {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@md {
		top : var(--z2);
	}
	.top\:-2\@md {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@md {
		top : var(--z3);
	}
	.top\:-3\@md {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@md {
		top : var(--z4);
	}
	.top\:-4\@md {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@md {
		top : var(--z5);
	}
	.top\:-5\@md {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@md {
		top : var(--z6);
	}
	.top\:-6\@md {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@md {
		top : var(--z7);
	}
	.top\:-7\@md {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@md {
		top : var(--z8);
	}
	.top\:-8\@md {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@md {
		top : var(--z9);
	}
	.top\:-9\@md {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@md {
		top : var(--z10);
	}
	.top\:-10\@md {
		top : -var(--z10);
	}
}
@media (--mq-md) {
	.bottom\@md {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@md {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@md {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@md {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@md {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@md {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@md {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@md {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@md {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@md {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@md {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@md {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@md {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@md {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@md {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@md {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@md {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@md {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@md {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@md {
		bottom : var(--z0);
	}
	.bottom\:-0\@md {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@md {
		bottom : var(--z1);
	}
	.bottom\:-1\@md {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@md {
		bottom : var(--z2);
	}
	.bottom\:-2\@md {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@md {
		bottom : var(--z3);
	}
	.bottom\:-3\@md {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@md {
		bottom : var(--z4);
	}
	.bottom\:-4\@md {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@md {
		bottom : var(--z5);
	}
	.bottom\:-5\@md {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@md {
		bottom : var(--z6);
	}
	.bottom\:-6\@md {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@md {
		bottom : var(--z7);
	}
	.bottom\:-7\@md {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@md {
		bottom : var(--z8);
	}
	.bottom\:-8\@md {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@md {
		bottom : var(--z9);
	}
	.bottom\:-9\@md {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@md {
		bottom : var(--z10);
	}
	.bottom\:-10\@md {
		bottom : -var(--z10);
	}
}
@media (--mq-md) {
	.left\@md {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@md {
		left : var(--z-dot1);
	}
	.left\:-\.1\@md {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@md {
		left : var(--z-dot2);
	}
	.left\:-\.2\@md {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@md {
		left : var(--z-dot3);
	}
	.left\:-\.3\@md {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@md {
		left : var(--z-dot4);
	}
	.left\:-\.4\@md {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@md {
		left : var(--z-dot5);
	}
	.left\:-\.5\@md {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@md {
		left : var(--z-dot6);
	}
	.left\:-\.6\@md {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@md {
		left : var(--z-dot7);
	}
	.left\:-\.7\@md {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@md {
		left : var(--z-dot8);
	}
	.left\:-\.8\@md {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@md {
		left : var(--z-dot9);
	}
	.left\:-\.9\@md {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@md {
		left : var(--z0);
	}
	.left\:-0\@md {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@md {
		left : var(--z1);
	}
	.left\:-1\@md {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@md {
		left : var(--z2);
	}
	.left\:-2\@md {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@md {
		left : var(--z3);
	}
	.left\:-3\@md {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@md {
		left : var(--z4);
	}
	.left\:-4\@md {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@md {
		left : var(--z5);
	}
	.left\:-5\@md {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@md {
		left : var(--z6);
	}
	.left\:-6\@md {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@md {
		left : var(--z7);
	}
	.left\:-7\@md {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@md {
		left : var(--z8);
	}
	.left\:-8\@md {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@md {
		left : var(--z9);
	}
	.left\:-9\@md {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@md {
		left : var(--z10);
	}
	.left\:-10\@md {
		left : -var(--z10);
	}
}
@media (--mq-md) {
	.right\@md {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@md {
		right : var(--z-dot1);
	}
	.right\:-\.1\@md {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@md {
		right : var(--z-dot2);
	}
	.right\:-\.2\@md {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@md {
		right : var(--z-dot3);
	}
	.right\:-\.3\@md {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@md {
		right : var(--z-dot4);
	}
	.right\:-\.4\@md {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@md {
		right : var(--z-dot5);
	}
	.right\:-\.5\@md {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@md {
		right : var(--z-dot6);
	}
	.right\:-\.6\@md {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@md {
		right : var(--z-dot7);
	}
	.right\:-\.7\@md {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@md {
		right : var(--z-dot8);
	}
	.right\:-\.8\@md {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@md {
		right : var(--z-dot9);
	}
	.right\:-\.9\@md {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@md {
		right : var(--z0);
	}
	.right\:-0\@md {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@md {
		right : var(--z1);
	}
	.right\:-1\@md {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@md {
		right : var(--z2);
	}
	.right\:-2\@md {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@md {
		right : var(--z3);
	}
	.right\:-3\@md {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@md {
		right : var(--z4);
	}
	.right\:-4\@md {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@md {
		right : var(--z5);
	}
	.right\:-5\@md {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@md {
		right : var(--z6);
	}
	.right\:-6\@md {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@md {
		right : var(--z7);
	}
	.right\:-7\@md {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@md {
		right : var(--z8);
	}
	.right\:-8\@md {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@md {
		right : var(--z9);
	}
	.right\:-9\@md {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@md {
		right : var(--z10);
	}
	.right\:-10\@md {
		right : -var(--z10);
	}
}
@media (--mq-lg) {
	.top\@lg {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@lg {
		top : var(--z-dot1);
	}
	.top\:-\.1\@lg {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@lg {
		top : var(--z-dot2);
	}
	.top\:-\.2\@lg {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@lg {
		top : var(--z-dot3);
	}
	.top\:-\.3\@lg {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@lg {
		top : var(--z-dot4);
	}
	.top\:-\.4\@lg {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@lg {
		top : var(--z-dot5);
	}
	.top\:-\.5\@lg {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@lg {
		top : var(--z-dot6);
	}
	.top\:-\.6\@lg {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@lg {
		top : var(--z-dot7);
	}
	.top\:-\.7\@lg {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@lg {
		top : var(--z-dot8);
	}
	.top\:-\.8\@lg {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@lg {
		top : var(--z-dot9);
	}
	.top\:-\.9\@lg {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@lg {
		top : var(--z0);
	}
	.top\:-0\@lg {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@lg {
		top : var(--z1);
	}
	.top\:-1\@lg {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@lg {
		top : var(--z2);
	}
	.top\:-2\@lg {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@lg {
		top : var(--z3);
	}
	.top\:-3\@lg {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@lg {
		top : var(--z4);
	}
	.top\:-4\@lg {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@lg {
		top : var(--z5);
	}
	.top\:-5\@lg {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@lg {
		top : var(--z6);
	}
	.top\:-6\@lg {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@lg {
		top : var(--z7);
	}
	.top\:-7\@lg {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@lg {
		top : var(--z8);
	}
	.top\:-8\@lg {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@lg {
		top : var(--z9);
	}
	.top\:-9\@lg {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@lg {
		top : var(--z10);
	}
	.top\:-10\@lg {
		top : -var(--z10);
	}
}
@media (--mq-lg) {
	.bottom\@lg {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@lg {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@lg {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@lg {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@lg {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@lg {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@lg {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@lg {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@lg {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@lg {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@lg {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@lg {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@lg {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@lg {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@lg {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@lg {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@lg {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@lg {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@lg {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@lg {
		bottom : var(--z0);
	}
	.bottom\:-0\@lg {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@lg {
		bottom : var(--z1);
	}
	.bottom\:-1\@lg {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@lg {
		bottom : var(--z2);
	}
	.bottom\:-2\@lg {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@lg {
		bottom : var(--z3);
	}
	.bottom\:-3\@lg {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@lg {
		bottom : var(--z4);
	}
	.bottom\:-4\@lg {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@lg {
		bottom : var(--z5);
	}
	.bottom\:-5\@lg {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@lg {
		bottom : var(--z6);
	}
	.bottom\:-6\@lg {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@lg {
		bottom : var(--z7);
	}
	.bottom\:-7\@lg {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@lg {
		bottom : var(--z8);
	}
	.bottom\:-8\@lg {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@lg {
		bottom : var(--z9);
	}
	.bottom\:-9\@lg {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@lg {
		bottom : var(--z10);
	}
	.bottom\:-10\@lg {
		bottom : -var(--z10);
	}
}
@media (--mq-lg) {
	.left\@lg {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@lg {
		left : var(--z-dot1);
	}
	.left\:-\.1\@lg {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@lg {
		left : var(--z-dot2);
	}
	.left\:-\.2\@lg {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@lg {
		left : var(--z-dot3);
	}
	.left\:-\.3\@lg {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@lg {
		left : var(--z-dot4);
	}
	.left\:-\.4\@lg {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@lg {
		left : var(--z-dot5);
	}
	.left\:-\.5\@lg {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@lg {
		left : var(--z-dot6);
	}
	.left\:-\.6\@lg {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@lg {
		left : var(--z-dot7);
	}
	.left\:-\.7\@lg {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@lg {
		left : var(--z-dot8);
	}
	.left\:-\.8\@lg {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@lg {
		left : var(--z-dot9);
	}
	.left\:-\.9\@lg {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@lg {
		left : var(--z0);
	}
	.left\:-0\@lg {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@lg {
		left : var(--z1);
	}
	.left\:-1\@lg {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@lg {
		left : var(--z2);
	}
	.left\:-2\@lg {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@lg {
		left : var(--z3);
	}
	.left\:-3\@lg {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@lg {
		left : var(--z4);
	}
	.left\:-4\@lg {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@lg {
		left : var(--z5);
	}
	.left\:-5\@lg {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@lg {
		left : var(--z6);
	}
	.left\:-6\@lg {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@lg {
		left : var(--z7);
	}
	.left\:-7\@lg {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@lg {
		left : var(--z8);
	}
	.left\:-8\@lg {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@lg {
		left : var(--z9);
	}
	.left\:-9\@lg {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@lg {
		left : var(--z10);
	}
	.left\:-10\@lg {
		left : -var(--z10);
	}
}
@media (--mq-lg) {
	.right\@lg {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@lg {
		right : var(--z-dot1);
	}
	.right\:-\.1\@lg {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@lg {
		right : var(--z-dot2);
	}
	.right\:-\.2\@lg {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@lg {
		right : var(--z-dot3);
	}
	.right\:-\.3\@lg {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@lg {
		right : var(--z-dot4);
	}
	.right\:-\.4\@lg {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@lg {
		right : var(--z-dot5);
	}
	.right\:-\.5\@lg {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@lg {
		right : var(--z-dot6);
	}
	.right\:-\.6\@lg {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@lg {
		right : var(--z-dot7);
	}
	.right\:-\.7\@lg {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@lg {
		right : var(--z-dot8);
	}
	.right\:-\.8\@lg {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@lg {
		right : var(--z-dot9);
	}
	.right\:-\.9\@lg {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@lg {
		right : var(--z0);
	}
	.right\:-0\@lg {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@lg {
		right : var(--z1);
	}
	.right\:-1\@lg {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@lg {
		right : var(--z2);
	}
	.right\:-2\@lg {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@lg {
		right : var(--z3);
	}
	.right\:-3\@lg {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@lg {
		right : var(--z4);
	}
	.right\:-4\@lg {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@lg {
		right : var(--z5);
	}
	.right\:-5\@lg {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@lg {
		right : var(--z6);
	}
	.right\:-6\@lg {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@lg {
		right : var(--z7);
	}
	.right\:-7\@lg {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@lg {
		right : var(--z8);
	}
	.right\:-8\@lg {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@lg {
		right : var(--z9);
	}
	.right\:-9\@lg {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@lg {
		right : var(--z10);
	}
	.right\:-10\@lg {
		right : -var(--z10);
	}
}
@media (--mq-xl) {
	.top\@xl {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@xl {
		top : var(--z-dot1);
	}
	.top\:-\.1\@xl {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@xl {
		top : var(--z-dot2);
	}
	.top\:-\.2\@xl {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@xl {
		top : var(--z-dot3);
	}
	.top\:-\.3\@xl {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@xl {
		top : var(--z-dot4);
	}
	.top\:-\.4\@xl {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@xl {
		top : var(--z-dot5);
	}
	.top\:-\.5\@xl {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@xl {
		top : var(--z-dot6);
	}
	.top\:-\.6\@xl {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@xl {
		top : var(--z-dot7);
	}
	.top\:-\.7\@xl {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@xl {
		top : var(--z-dot8);
	}
	.top\:-\.8\@xl {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@xl {
		top : var(--z-dot9);
	}
	.top\:-\.9\@xl {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@xl {
		top : var(--z0);
	}
	.top\:-0\@xl {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@xl {
		top : var(--z1);
	}
	.top\:-1\@xl {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@xl {
		top : var(--z2);
	}
	.top\:-2\@xl {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@xl {
		top : var(--z3);
	}
	.top\:-3\@xl {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@xl {
		top : var(--z4);
	}
	.top\:-4\@xl {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@xl {
		top : var(--z5);
	}
	.top\:-5\@xl {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@xl {
		top : var(--z6);
	}
	.top\:-6\@xl {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@xl {
		top : var(--z7);
	}
	.top\:-7\@xl {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@xl {
		top : var(--z8);
	}
	.top\:-8\@xl {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@xl {
		top : var(--z9);
	}
	.top\:-9\@xl {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@xl {
		top : var(--z10);
	}
	.top\:-10\@xl {
		top : -var(--z10);
	}
}
@media (--mq-xl) {
	.bottom\@xl {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@xl {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@xl {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@xl {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@xl {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@xl {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@xl {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@xl {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@xl {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@xl {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@xl {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@xl {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@xl {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@xl {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@xl {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@xl {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@xl {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@xl {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@xl {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@xl {
		bottom : var(--z0);
	}
	.bottom\:-0\@xl {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@xl {
		bottom : var(--z1);
	}
	.bottom\:-1\@xl {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@xl {
		bottom : var(--z2);
	}
	.bottom\:-2\@xl {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@xl {
		bottom : var(--z3);
	}
	.bottom\:-3\@xl {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@xl {
		bottom : var(--z4);
	}
	.bottom\:-4\@xl {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@xl {
		bottom : var(--z5);
	}
	.bottom\:-5\@xl {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@xl {
		bottom : var(--z6);
	}
	.bottom\:-6\@xl {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@xl {
		bottom : var(--z7);
	}
	.bottom\:-7\@xl {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@xl {
		bottom : var(--z8);
	}
	.bottom\:-8\@xl {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@xl {
		bottom : var(--z9);
	}
	.bottom\:-9\@xl {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@xl {
		bottom : var(--z10);
	}
	.bottom\:-10\@xl {
		bottom : -var(--z10);
	}
}
@media (--mq-xl) {
	.left\@xl {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@xl {
		left : var(--z-dot1);
	}
	.left\:-\.1\@xl {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@xl {
		left : var(--z-dot2);
	}
	.left\:-\.2\@xl {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@xl {
		left : var(--z-dot3);
	}
	.left\:-\.3\@xl {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@xl {
		left : var(--z-dot4);
	}
	.left\:-\.4\@xl {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@xl {
		left : var(--z-dot5);
	}
	.left\:-\.5\@xl {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@xl {
		left : var(--z-dot6);
	}
	.left\:-\.6\@xl {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@xl {
		left : var(--z-dot7);
	}
	.left\:-\.7\@xl {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@xl {
		left : var(--z-dot8);
	}
	.left\:-\.8\@xl {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@xl {
		left : var(--z-dot9);
	}
	.left\:-\.9\@xl {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@xl {
		left : var(--z0);
	}
	.left\:-0\@xl {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@xl {
		left : var(--z1);
	}
	.left\:-1\@xl {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@xl {
		left : var(--z2);
	}
	.left\:-2\@xl {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@xl {
		left : var(--z3);
	}
	.left\:-3\@xl {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@xl {
		left : var(--z4);
	}
	.left\:-4\@xl {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@xl {
		left : var(--z5);
	}
	.left\:-5\@xl {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@xl {
		left : var(--z6);
	}
	.left\:-6\@xl {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@xl {
		left : var(--z7);
	}
	.left\:-7\@xl {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@xl {
		left : var(--z8);
	}
	.left\:-8\@xl {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@xl {
		left : var(--z9);
	}
	.left\:-9\@xl {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@xl {
		left : var(--z10);
	}
	.left\:-10\@xl {
		left : -var(--z10);
	}
}
@media (--mq-xl) {
	.right\@xl {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@xl {
		right : var(--z-dot1);
	}
	.right\:-\.1\@xl {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@xl {
		right : var(--z-dot2);
	}
	.right\:-\.2\@xl {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@xl {
		right : var(--z-dot3);
	}
	.right\:-\.3\@xl {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@xl {
		right : var(--z-dot4);
	}
	.right\:-\.4\@xl {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@xl {
		right : var(--z-dot5);
	}
	.right\:-\.5\@xl {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@xl {
		right : var(--z-dot6);
	}
	.right\:-\.6\@xl {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@xl {
		right : var(--z-dot7);
	}
	.right\:-\.7\@xl {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@xl {
		right : var(--z-dot8);
	}
	.right\:-\.8\@xl {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@xl {
		right : var(--z-dot9);
	}
	.right\:-\.9\@xl {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@xl {
		right : var(--z0);
	}
	.right\:-0\@xl {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@xl {
		right : var(--z1);
	}
	.right\:-1\@xl {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@xl {
		right : var(--z2);
	}
	.right\:-2\@xl {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@xl {
		right : var(--z3);
	}
	.right\:-3\@xl {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@xl {
		right : var(--z4);
	}
	.right\:-4\@xl {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@xl {
		right : var(--z5);
	}
	.right\:-5\@xl {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@xl {
		right : var(--z6);
	}
	.right\:-6\@xl {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@xl {
		right : var(--z7);
	}
	.right\:-7\@xl {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@xl {
		right : var(--z8);
	}
	.right\:-8\@xl {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@xl {
		right : var(--z9);
	}
	.right\:-9\@xl {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@xl {
		right : var(--z10);
	}
	.right\:-10\@xl {
		right : -var(--z10);
	}
}
@media (--mq-xxl) {
	.top\@xxl {
		top : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.1\@xxl {
		top : var(--z-dot1);
	}
	.top\:-\.1\@xxl {
		top : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.2\@xxl {
		top : var(--z-dot2);
	}
	.top\:-\.2\@xxl {
		top : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.3\@xxl {
		top : var(--z-dot3);
	}
	.top\:-\.3\@xxl {
		top : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.4\@xxl {
		top : var(--z-dot4);
	}
	.top\:-\.4\@xxl {
		top : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.5\@xxl {
		top : var(--z-dot5);
	}
	.top\:-\.5\@xxl {
		top : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.6\@xxl {
		top : var(--z-dot6);
	}
	.top\:-\.6\@xxl {
		top : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.7\@xxl {
		top : var(--z-dot7);
	}
	.top\:-\.7\@xxl {
		top : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.8\@xxl {
		top : var(--z-dot8);
	}
	.top\:-\.8\@xxl {
		top : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:\.9\@xxl {
		top : var(--z-dot9);
	}
	.top\:-\.9\@xxl {
		top : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:0\@xxl {
		top : var(--z0);
	}
	.top\:-0\@xxl {
		top : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:1\@xxl {
		top : var(--z1);
	}
	.top\:-1\@xxl {
		top : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:2\@xxl {
		top : var(--z2);
	}
	.top\:-2\@xxl {
		top : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:3\@xxl {
		top : var(--z3);
	}
	.top\:-3\@xxl {
		top : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:4\@xxl {
		top : var(--z4);
	}
	.top\:-4\@xxl {
		top : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:5\@xxl {
		top : var(--z5);
	}
	.top\:-5\@xxl {
		top : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:6\@xxl {
		top : var(--z6);
	}
	.top\:-6\@xxl {
		top : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:7\@xxl {
		top : var(--z7);
	}
	.top\:-7\@xxl {
		top : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:8\@xxl {
		top : var(--z8);
	}
	.top\:-8\@xxl {
		top : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:9\@xxl {
		top : var(--z9);
	}
	.top\:-9\@xxl {
		top : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.top\:10\@xxl {
		top : var(--z10);
	}
	.top\:-10\@xxl {
		top : -var(--z10);
	}
}
@media (--mq-xxl) {
	.bottom\@xxl {
		bottom : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.1\@xxl {
		bottom : var(--z-dot1);
	}
	.bottom\:-\.1\@xxl {
		bottom : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.2\@xxl {
		bottom : var(--z-dot2);
	}
	.bottom\:-\.2\@xxl {
		bottom : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.3\@xxl {
		bottom : var(--z-dot3);
	}
	.bottom\:-\.3\@xxl {
		bottom : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.4\@xxl {
		bottom : var(--z-dot4);
	}
	.bottom\:-\.4\@xxl {
		bottom : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.5\@xxl {
		bottom : var(--z-dot5);
	}
	.bottom\:-\.5\@xxl {
		bottom : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.6\@xxl {
		bottom : var(--z-dot6);
	}
	.bottom\:-\.6\@xxl {
		bottom : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.7\@xxl {
		bottom : var(--z-dot7);
	}
	.bottom\:-\.7\@xxl {
		bottom : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.8\@xxl {
		bottom : var(--z-dot8);
	}
	.bottom\:-\.8\@xxl {
		bottom : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:\.9\@xxl {
		bottom : var(--z-dot9);
	}
	.bottom\:-\.9\@xxl {
		bottom : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:0\@xxl {
		bottom : var(--z0);
	}
	.bottom\:-0\@xxl {
		bottom : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:1\@xxl {
		bottom : var(--z1);
	}
	.bottom\:-1\@xxl {
		bottom : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:2\@xxl {
		bottom : var(--z2);
	}
	.bottom\:-2\@xxl {
		bottom : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:3\@xxl {
		bottom : var(--z3);
	}
	.bottom\:-3\@xxl {
		bottom : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:4\@xxl {
		bottom : var(--z4);
	}
	.bottom\:-4\@xxl {
		bottom : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:5\@xxl {
		bottom : var(--z5);
	}
	.bottom\:-5\@xxl {
		bottom : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:6\@xxl {
		bottom : var(--z6);
	}
	.bottom\:-6\@xxl {
		bottom : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:7\@xxl {
		bottom : var(--z7);
	}
	.bottom\:-7\@xxl {
		bottom : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:8\@xxl {
		bottom : var(--z8);
	}
	.bottom\:-8\@xxl {
		bottom : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:9\@xxl {
		bottom : var(--z9);
	}
	.bottom\:-9\@xxl {
		bottom : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.bottom\:10\@xxl {
		bottom : var(--z10);
	}
	.bottom\:-10\@xxl {
		bottom : -var(--z10);
	}
}
@media (--mq-xxl) {
	.left\@xxl {
		left : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.1\@xxl {
		left : var(--z-dot1);
	}
	.left\:-\.1\@xxl {
		left : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.2\@xxl {
		left : var(--z-dot2);
	}
	.left\:-\.2\@xxl {
		left : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.3\@xxl {
		left : var(--z-dot3);
	}
	.left\:-\.3\@xxl {
		left : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.4\@xxl {
		left : var(--z-dot4);
	}
	.left\:-\.4\@xxl {
		left : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.5\@xxl {
		left : var(--z-dot5);
	}
	.left\:-\.5\@xxl {
		left : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.6\@xxl {
		left : var(--z-dot6);
	}
	.left\:-\.6\@xxl {
		left : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.7\@xxl {
		left : var(--z-dot7);
	}
	.left\:-\.7\@xxl {
		left : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.8\@xxl {
		left : var(--z-dot8);
	}
	.left\:-\.8\@xxl {
		left : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:\.9\@xxl {
		left : var(--z-dot9);
	}
	.left\:-\.9\@xxl {
		left : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:0\@xxl {
		left : var(--z0);
	}
	.left\:-0\@xxl {
		left : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:1\@xxl {
		left : var(--z1);
	}
	.left\:-1\@xxl {
		left : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:2\@xxl {
		left : var(--z2);
	}
	.left\:-2\@xxl {
		left : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:3\@xxl {
		left : var(--z3);
	}
	.left\:-3\@xxl {
		left : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:4\@xxl {
		left : var(--z4);
	}
	.left\:-4\@xxl {
		left : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:5\@xxl {
		left : var(--z5);
	}
	.left\:-5\@xxl {
		left : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:6\@xxl {
		left : var(--z6);
	}
	.left\:-6\@xxl {
		left : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:7\@xxl {
		left : var(--z7);
	}
	.left\:-7\@xxl {
		left : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:8\@xxl {
		left : var(--z8);
	}
	.left\:-8\@xxl {
		left : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:9\@xxl {
		left : var(--z9);
	}
	.left\:-9\@xxl {
		left : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.left\:10\@xxl {
		left : var(--z10);
	}
	.left\:-10\@xxl {
		left : -var(--z10);
	}
}
@media (--mq-xxl) {
	.right\@xxl {
		right : 100%;
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.1\@xxl {
		right : var(--z-dot1);
	}
	.right\:-\.1\@xxl {
		right : -var(--z-dot1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.2\@xxl {
		right : var(--z-dot2);
	}
	.right\:-\.2\@xxl {
		right : -var(--z-dot2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.3\@xxl {
		right : var(--z-dot3);
	}
	.right\:-\.3\@xxl {
		right : -var(--z-dot3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.4\@xxl {
		right : var(--z-dot4);
	}
	.right\:-\.4\@xxl {
		right : -var(--z-dot4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.5\@xxl {
		right : var(--z-dot5);
	}
	.right\:-\.5\@xxl {
		right : -var(--z-dot5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.6\@xxl {
		right : var(--z-dot6);
	}
	.right\:-\.6\@xxl {
		right : -var(--z-dot6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.7\@xxl {
		right : var(--z-dot7);
	}
	.right\:-\.7\@xxl {
		right : -var(--z-dot7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.8\@xxl {
		right : var(--z-dot8);
	}
	.right\:-\.8\@xxl {
		right : -var(--z-dot8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:\.9\@xxl {
		right : var(--z-dot9);
	}
	.right\:-\.9\@xxl {
		right : -var(--z-dot9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:0\@xxl {
		right : var(--z0);
	}
	.right\:-0\@xxl {
		right : -var(--z0);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:1\@xxl {
		right : var(--z1);
	}
	.right\:-1\@xxl {
		right : -var(--z1);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:2\@xxl {
		right : var(--z2);
	}
	.right\:-2\@xxl {
		right : -var(--z2);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:3\@xxl {
		right : var(--z3);
	}
	.right\:-3\@xxl {
		right : -var(--z3);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:4\@xxl {
		right : var(--z4);
	}
	.right\:-4\@xxl {
		right : -var(--z4);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:5\@xxl {
		right : var(--z5);
	}
	.right\:-5\@xxl {
		right : -var(--z5);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:6\@xxl {
		right : var(--z6);
	}
	.right\:-6\@xxl {
		right : -var(--z6);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:7\@xxl {
		right : var(--z7);
	}
	.right\:-7\@xxl {
		right : -var(--z7);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:8\@xxl {
		right : var(--z8);
	}
	.right\:-8\@xxl {
		right : -var(--z8);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:9\@xxl {
		right : var(--z9);
	}
	.right\:-9\@xxl {
		right : -var(--z9);
	}
	/*---
						title: Position $(
						section: Side
						---

						```html
						<span class="$(pos):$(z)@$(mq)">$(pos):$(z)@$(mq)</span>
						```
					*/
	.right\:10\@xxl {
		right : var(--z10);
	}
	.right\:-10\@xxl {
		right : -var(--z10);
	}
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.1 {
	max-width : var(--z-dot1);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.2 {
	max-width : var(--z-dot2);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.3 {
	max-width : var(--z-dot3);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.4 {
	max-width : var(--z-dot4);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.5 {
	max-width : var(--z-dot5);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.6 {
	max-width : var(--z-dot6);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.7 {
	max-width : var(--z-dot7);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.8 {
	max-width : var(--z-dot8);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:\.9 {
	max-width : var(--z-dot9);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:0 {
	max-width : var(--z0);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:1 {
	max-width : var(--z1);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:2 {
	max-width : var(--z2);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:3 {
	max-width : var(--z3);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:4 {
	max-width : var(--z4);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:5 {
	max-width : var(--z5);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:6 {
	max-width : var(--z6);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:7 {
	max-width : var(--z7);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:8 {
	max-width : var(--z8);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:9 {
	max-width : var(--z9);
}
/*---
				title: $(z)
				section: Max Width
				---

				```html
				<span class="m-w:$(z)">m-w:$(z)</span>
				```
			*/
.m-w\:10 {
	max-width : var(--z10);
}
@media (--mq-xxs) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@xxs {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@xxs {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@xxs {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@xxs {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@xxs {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@xxs {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@xxs {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@xxs {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@xxs {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@xxs {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@xxs {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@xxs {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@xxs {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@xxs {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@xxs {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@xxs {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@xxs {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@xxs {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@xxs {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@xxs {
		max-width : var(--z10);
	}
}
@media (--mq-xs) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@xs {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@xs {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@xs {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@xs {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@xs {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@xs {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@xs {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@xs {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@xs {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@xs {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@xs {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@xs {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@xs {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@xs {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@xs {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@xs {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@xs {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@xs {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@xs {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@xs {
		max-width : var(--z10);
	}
}
@media (--mq-sm) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@sm {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@sm {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@sm {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@sm {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@sm {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@sm {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@sm {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@sm {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@sm {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@sm {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@sm {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@sm {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@sm {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@sm {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@sm {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@sm {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@sm {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@sm {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@sm {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@sm {
		max-width : var(--z10);
	}
}
@media (--mq-md) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@md {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@md {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@md {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@md {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@md {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@md {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@md {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@md {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@md {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@md {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@md {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@md {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@md {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@md {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@md {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@md {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@md {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@md {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@md {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@md {
		max-width : var(--z10);
	}
}
@media (--mq-lg) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@lg {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@lg {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@lg {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@lg {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@lg {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@lg {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@lg {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@lg {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@lg {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@lg {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@lg {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@lg {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@lg {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@lg {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@lg {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@lg {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@lg {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@lg {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@lg {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@lg {
		max-width : var(--z10);
	}
}
@media (--mq-xl) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@xl {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@xl {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@xl {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@xl {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@xl {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@xl {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@xl {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@xl {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@xl {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@xl {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@xl {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@xl {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@xl {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@xl {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@xl {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@xl {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@xl {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@xl {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@xl {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@xl {
		max-width : var(--z10);
	}
}
@media (--mq-xxl) {
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.1\@xxl {
		max-width : var(--z-dot1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.2\@xxl {
		max-width : var(--z-dot2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.3\@xxl {
		max-width : var(--z-dot3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.4\@xxl {
		max-width : var(--z-dot4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.5\@xxl {
		max-width : var(--z-dot5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.6\@xxl {
		max-width : var(--z-dot6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.7\@xxl {
		max-width : var(--z-dot7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.8\@xxl {
		max-width : var(--z-dot8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:\.9\@xxl {
		max-width : var(--z-dot9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:0\@xxl {
		max-width : var(--z0);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:1\@xxl {
		max-width : var(--z1);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:2\@xxl {
		max-width : var(--z2);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:3\@xxl {
		max-width : var(--z3);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:4\@xxl {
		max-width : var(--z4);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:5\@xxl {
		max-width : var(--z5);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:6\@xxl {
		max-width : var(--z6);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:7\@xxl {
		max-width : var(--z7);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:8\@xxl {
		max-width : var(--z8);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:9\@xxl {
		max-width : var(--z9);
	}
	/*---
					title: $(z)
					section: Max Width
					---

					```html
					<span class="m-w:$(z)@$(mq)">m-w:$(z)@$(mq)</span>
					```
				*/
	.m-w\:10\@xxl {
		max-width : var(--z10);
	}
}
:root {
	--t-t-options: (uppercase, lowercase, capitalize, none), (u, l, c, n);
}
/*---
				title: $(style)
				section: text-transform
				---

				```html
				<span class=".t-t:$(var)">t-t:$(var)</span>
				```
			*/
.t-t\:u {
	text-transform : uppercase;
}
/*---
				title: $(style)
				section: text-transform
				---

				```html
				<span class=".t-t:$(var)">t-t:$(var)</span>
				```
			*/
.t-t\:l {
	text-transform : lowercase;
}
/*---
				title: $(style)
				section: text-transform
				---

				```html
				<span class=".t-t:$(var)">t-t:$(var)</span>
				```
			*/
.t-t\:c {
	text-transform : capitalize;
}
/*---
				title: $(style)
				section: text-transform
				---

				```html
				<span class=".t-t:$(var)">t-t:$(var)</span>
				```
			*/
.t-t\:n {
	text-transform : none;
}
@media (--mq-xxs) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@xxs {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@xxs {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@xxs {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@xxs {
		text-transform : none;
	}
}
@media (--mq-xs) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@xs {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@xs {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@xs {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@xs {
		text-transform : none;
	}
}
@media (--mq-sm) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@sm {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@sm {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@sm {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@sm {
		text-transform : none;
	}
}
@media (--mq-md) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@md {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@md {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@md {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@md {
		text-transform : none;
	}
}
@media (--mq-lg) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@lg {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@lg {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@lg {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@lg {
		text-transform : none;
	}
}
@media (--mq-xl) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@xl {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@xl {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@xl {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@xl {
		text-transform : none;
	}
}
@media (--mq-xxl) {
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:u\@xxl {
		text-transform : uppercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:l\@xxl {
		text-transform : lowercase;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:c\@xxl {
		text-transform : capitalize;
	}
	/*---
					title: $(style)
					section: text-transform
					---

					```html
					<span class=".t-t:$(var)\@$(mq)">t-t:$(var)@$(mq)</span>
					```
				*/
	.t-t\:n\@xxl {
		text-transform : none;
	}
}
:root {
	--cur-options: (default, auto, none, pointer, text, help, move, not-allowed, grab, grabbing, zoom-in, zoom-out), (d, a, n, p, t, h, m, n-a, g, gg, z-i, z-o);
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:d {
	cursor : default;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:a {
	cursor : auto;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:n {
	cursor : none;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:p {
	cursor : pointer;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:t {
	cursor : text;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:h {
	cursor : help;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:m {
	cursor : move;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:n-a {
	cursor : not-allowed;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:g {
	cursor : grab;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:gg {
	cursor : grabbing;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:z-i {
	cursor : zoom-in;
}
/*---
				title: $(style)
				section: cursor
				---

				```html
				<span class=".cur:$(var)">cur:$(var)</span>
				```
			*/
.cur\:z-o {
	cursor : zoom-out;
}
@media (--mq-xxs) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@xxs {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@xxs {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@xxs {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@xxs {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@xxs {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@xxs {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@xxs {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@xxs {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@xxs {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@xxs {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@xxs {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@xxs {
		cursor : zoom-out;
	}
}
@media (--mq-xs) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@xs {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@xs {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@xs {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@xs {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@xs {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@xs {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@xs {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@xs {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@xs {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@xs {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@xs {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@xs {
		cursor : zoom-out;
	}
}
@media (--mq-sm) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@sm {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@sm {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@sm {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@sm {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@sm {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@sm {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@sm {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@sm {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@sm {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@sm {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@sm {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@sm {
		cursor : zoom-out;
	}
}
@media (--mq-md) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@md {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@md {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@md {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@md {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@md {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@md {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@md {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@md {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@md {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@md {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@md {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@md {
		cursor : zoom-out;
	}
}
@media (--mq-lg) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@lg {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@lg {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@lg {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@lg {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@lg {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@lg {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@lg {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@lg {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@lg {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@lg {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@lg {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@lg {
		cursor : zoom-out;
	}
}
@media (--mq-xl) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@xl {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@xl {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@xl {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@xl {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@xl {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@xl {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@xl {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@xl {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@xl {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@xl {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@xl {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@xl {
		cursor : zoom-out;
	}
}
@media (--mq-xxl) {
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:d\@xxl {
		cursor : default;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:a\@xxl {
		cursor : auto;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n\@xxl {
		cursor : none;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:p\@xxl {
		cursor : pointer;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:t\@xxl {
		cursor : text;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:h\@xxl {
		cursor : help;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:m\@xxl {
		cursor : move;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:n-a\@xxl {
		cursor : not-allowed;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:g\@xxl {
		cursor : grab;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:gg\@xxl {
		cursor : grabbing;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-i\@xxl {
		cursor : zoom-in;
	}
	/*---
					title: $(style)
					section: cursor
					---

					```html
					<span class=".cur:$(var)\@$(mq)">cur:$(var)@$(mq)</span>
					```
				*/
	.cur\:z-o\@xxl {
		cursor : zoom-out;
	}
}
:root {
	--ms-ratio: var(--minor-third);
	--mqs: n, xxs, xs, sm ,md, lg, xl, xxl;
	--ms: -dot1, -dot2, -dot3, -dot4, -dot5, -dot6, -dot7, -dot8, -dot9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
	--z: \.1, \.2, \.3, \.4, \.5, \.6, \.7, \.8, \.9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
	--f-f-styles: (sans, serif, mono), (f-f-sans, f-f-serif, f-f-mono);
	--f-f-sans: sans-serif;
	--f-f-serif: serif;
	--f-f-mono: monospace;
	--f-s-styles: (normal, italic, oblique), (n, i, o);
	--f-w-min: 100;
	--f-w-max: 900;
	--l-h--default: 1;
	--l-h--tight: var(--z2);
	--l-h--normal: var(--z1);
	--l-h--loose: var(--z4);
	--l-h: (d, t, n, l), (var(--l-h--default), var(--l-h--tight), var(--l-h--normal), var(--l-h--loose));
	--l-s--default: normal;
	--l-s--tight: -.08em;
	--l-s--normal: .16em;
	--l-s--loose: .32em;
	--dirs: all, top, bottom, left, right, x, y;
	--dirs-short: a, t, b, l, r, x, y;
	--display-props: block, inline-block, inline, flex, table, table-cell, none;
	--display-shorthands: b, i-b, i, f, t, t-c, n;
	--pos-options: (absolute, relative, static, fixed, cover), (a, r, s, f, c);
	--sides-options: (top, bottom, left, right);
	--z-dot9: var(--ms-1);
	--z-dot8: var(--ms-2);
	--z-dot7: var(--ms-3);
	--z-dot6: var(--ms-4);
	--z-dot5: var(--ms-5);
	--z-dot4: var(--ms-6);
	--z-dot3: var(--ms-7);
	--z-dot2: var(--ms-8);
	--z-dot1: var(--ms-9);
	--z0: 0;
	--z1: var(--ms0);
	--z2: var(--ms1);
	--z3: var(--ms2);
	--z4: var(--ms3);
	--z5: var(--ms4);
	--z6: var(--ms5);
	--z7: var(--ms6);
	--z8: var(--ms7);
	--z9: var(--ms8);
	--z10: var(--ms9);
}
@custom-media --mq-xxs (min-width: 20em);
@custom-media --mq-xs (min-width: 25em);
@custom-media --mq-sm (min-width: 30em);
@custom-media --mq-md (min-width: 37em);
@custom-media --mq-lg (min-width: 50em);
@custom-media --mq-xl (min-width: 75em);
@custom-media --mq-xxl (min-width: 100em);