@charset "UTF-8";

:root {
	--gap-4: 0.25rem;	/* 4px */
	--gap-8: 0.5rem;	/* 8px */
	--gap-12: 0.75rem;	/* 12px */
	--gap-16: 1rem;		/* 16px */
	--gap-24: 1.5rem;	/* 24px */
	--gap-32: 2rem;		/* 32px */
	--gap-36: 2.25rem;	/* 36px */
	--gap-40: 2.5rem;	/* 40px */
	--gap-48: 3rem;		/* 48px */
	--gap-60: 3.75rem;	/* 60px */
	--gap-64: 4rem;		/* 64px */
	--gap-72: 4.5rem;	/* 72px */
	--gap-80: 5rem;		/* 80px */
	--gap-96: 6rem;		/* 96px */
	--gap-120: 7.5rem;	/* 120px */
}

/* --mdui-breakpoint-sm 0-600px */
:root {
	--gap-auto-1x: var(--gap-8);
	--gap-auto-2x: var(--gap-16);
	--gap-auto-3x: var(--gap-24);
	--gap-auto-4x: var(--gap-32);
	--gap-auto-5x: var(--gap-40);
}
@media only screen and (min-width: 600px ) {
	/* --mdui-breakpoint-md 600-839px */
	:root {
		--gap-auto-1x: var(--gap-12);
		--gap-auto-2x: var(--gap-24);
		--gap-auto-3x: var(--gap-36);
		--gap-auto-4x: var(--gap-48);
		--gap-auto-5x: var(--gap-60);
	}
}
@media only screen and (min-width: 840px ) {
	/* --mdui-breakpoint-lg 840-1079px */
	:root {
		--gap-auto-1x: var(--gap-16);
		--gap-auto-2x: var(--gap-32);
		--gap-auto-3x: var(--gap-48);
		--gap-auto-4x: var(--gap-64);
		--gap-auto-5x: var(--gap-80);	}
}
@media only screen and (min-width: 1080px ) {
	/* --mdui-breakpoint-lg 1080-1441px */
	:root {
		--gap-auto-1x: var(--gap-24);
		--gap-auto-2x: var(--gap-48);
		--gap-auto-3x: var(--gap-72);
		--gap-auto-4x: var(--gap-96);
		--gap-auto-5x: var(--gap-120);
	}
}

.grid {
	/* --mdui-breakpoint-sm 0-599px */
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--gap-auto-1x);
	row-gap: var(--gap-auto-2x);
	max-width: 100%;
}
@media only screen and (min-width: 1080px) {
	/* --mdui-breakpoint-lg 1080-1439px */
	.grid {
		column-gap: var(--gap-auto-1x);
		row-gap: var(--gap-auto-1x);
	}
}

.grid .s1 { grid-column: auto/span 1; }
.grid .s2 { grid-column: auto/span 2; }
.grid .s3 { grid-column: auto/span 3; }
.grid .s4 { grid-column: auto/span 4; }
.grid .s5 { grid-column: auto/span 5; }
.grid .s6 { grid-column: auto/span 6; }
.grid .s7 { grid-column: auto/span 7; }
.grid .s8 { grid-column: auto/span 8; }
.grid .s9 { grid-column: auto/span 9; }
.grid .s10 { grid-column: auto/span 10; }
.grid .s11 { grid-column: auto/span 11; }
.grid .s12 { grid-column: auto/span 12; }

.grid .offset-s1 { grid-column-start: 3; }
.grid .offset-s2 { grid-column-start: 2; }
.grid .offset-s3 { grid-column-start: 4; }
.grid .offset-s4 { grid-column-start: 5; }
.grid .offset-s5 { grid-column-start: 6; }
.grid .offset-s6 { grid-column-start: 7; }
.grid .offset-s7 { grid-column-start: 8; }
.grid .offset-s8 { grid-column-start: 9; }
.grid .offset-s9 { grid-column-start: 10; }
.grid .offset-s10 { grid-column-start: 11; }
.grid .offset-s11 { grid-column-start: 12; }

@media only screen and (min-width: 600px) { /* orig: 601px */
	.grid .m1 { grid-column: auto/span 1; }
	.grid .m2 { grid-column: auto/span 2; }
	.grid .m3 { grid-column: auto/span 3; }
	.grid .m4 { grid-column: auto/span 4; }
	.grid .m5 { grid-column: auto/span 5; }
	.grid .m6 { grid-column: auto/span 6; }
	.grid .m7 { grid-column: auto/span 7; }
	.grid .m8 { grid-column: auto/span 8; }
	.grid .m9 { grid-column: auto/span 9; }
	.grid .m10 { grid-column: auto/span 10; }
	.grid .m11 { grid-column: auto/span 11; }
	.grid .m12 { grid-column: auto/span 12; }
	.grid .offset-m1 { grid-column-start: 2; }
	.grid .offset-m2 { grid-column-start: 3; }
	.grid .offset-m3 { grid-column-start: 4; }
	.grid .offset-m4 { grid-column-start: 5; }
	.grid .offset-m5 { grid-column-start: 6; }
	.grid .offset-m6 { grid-column-start: 7; }
	.grid .offset-m7 { grid-column-start: 8; }
	.grid .offset-m8 { grid-column-start: 9; }
	.grid .offset-m9 { grid-column-start: 10; }
	.grid .offset-m10 { grid-column-start: 11; }
	.grid .offset-m11 { grid-column-start: 12; }
}

@media only screen and (min-width: 840px) { /* orig: 993px */
	.grid .l1 { grid-column: auto/span 1; }
	.grid .l2 { grid-column: auto/span 2; }
	.grid .l3 { grid-column: auto/span 3; }
	.grid .l4 { grid-column: auto/span 4; }
	.grid .l5 { grid-column: auto/span 5; }
	.grid .l6 { grid-column: auto/span 6; }
	.grid .l7 { grid-column: auto/span 7; }
	.grid .l8 { grid-column: auto/span 8; }
	.grid .l9 { grid-column: auto/span 9; }
	.grid .l10 { grid-column: auto/span 10; }
	.grid .l11 { grid-column: auto/span 11; }
	.grid .l12 { grid-column: auto/span 12; }
	.grid .offset-l1 { grid-column-start: 2; }
	.grid .offset-l2 { grid-column-start: 3; }
	.grid .offset-l3 { grid-column-start: 4; }
	.grid .offset-l4 { grid-column-start: 5; }
	.grid .offset-l5 { grid-column-start: 6; }
	.grid .offset-l6 { grid-column-start: 7; }
	.grid .offset-l7 { grid-column-start: 8; }
	.grid .offset-l8 { grid-column-start: 9; }
	.grid .offset-l9 { grid-column-start: 10; }
	.grid .offset-l10 { grid-column-start: 11; }
	.grid .offset-l11 { grid-column-start: 12; }
}

@media only screen and (min-width : 1080px) { /* orig: 1201px */
	.grid .xl1 { grid-column: auto/span 1; }
	.grid .xl2 { grid-column: auto/span 2; }
	.grid .xl3 { grid-column: auto/span 3; }
	.grid .xl4 { grid-column: auto/span 4; }
	.grid .xl5 { grid-column: auto/span 5; }
	.grid .xl6 { grid-column: auto/span 6; }
	.grid .xl7 { grid-column: auto/span 7; }
	.grid .xl8 { grid-column: auto/span 8; }
	.grid .xl9 { grid-column: auto/span 9; }
	.grid .xl10 { grid-column: auto/span 10; }
	.grid .xl11 { grid-column: auto/span 11; }
	.grid .xl12 { grid-column: auto/span 12; }
	.grid .offset-xl1 { grid-column-start: 2; }
	.grid .offset-xl2 { grid-column-start: 3; }
	.grid .offset-xl3 { grid-column-start: 4; }
	.grid .offset-xl4 { grid-column-start: 5; }
	.grid .offset-xl5 { grid-column-start: 6; }
	.grid .offset-xl6 { grid-column-start: 7; }
	.grid .offset-xl7 { grid-column-start: 8; }
	.grid .offset-xl8 { grid-column-start: 9; }
	.grid .offset-xl9 { grid-column-start: 10; }
	.grid .offset-xl10 { grid-column-start: 11; }
	.grid .offset-xl11 { grid-column-start: 12; }
}

/*
.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12,
.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10, .m11, .m12,
.l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8, .l9, .l10, .l11, .l12,
.xl1, .xl2, .xl3, .xl4, .xl5, .xl6, .xl7, .xl8, .xl9, .xl10, .xl11, .xl12 {
	margin-top: 1rem;
}
*/