/*

GRID_SYSTEM
-> kann mit flex, grid oder float verwendet werden

FLEX:
Wrapper braucht Klasse .flexbox
Kinder brauchen Klasse(n) für Breite (z.B. .lg_6 )
-> Kinder können Klasse .col haben, brauchen sie aber nicht

GRID:
Wrapper braucht Klasse .grid
Kinder brauchen Klasse(n) für Breite (z.B. .lg_6 )

FLOAT:
Wrapper braucht keine Klasse, sollte aber clear: both bekommen
Kinder brauchen Klasse(n) für Breite (z.B. .lg_6 ) und .col
-> Elise wird möglicherweise böse, wenn das verwendt wird

*/

/*  GRID COLUMN */
.flexbox {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: var(--gap);
}

.col:not(.flexbox .col):not(.grid .col) {
	display: block;
	float:left;
}

.col:first-child { margin-left: 0; } /* alle browser ausser IE6 und älter */

.grid{
	display: grid;
	width:100%;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gap);
}

.grid:after {
	content: " "; /* Older browser do not support empty content */
    clear: both;
}

.grid .col.
.flexbox .col {
	display: block;
	float: none;
}


/* DESKTOP */
.lg_12 {
	width: 100%;
	width: calc(100% / 12 * 12);
}
.flexbox > .lg_12 {
	width: 100%;
}
.grid > .lg_12 {
	width: 100%;
	grid-column-end: span 12;
}

.lg_11 {
	width: 91.66666667%;
	width: calc(100% / 12 * 11);
}
.flexbox > .lg_11 {
	width: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
}
.grid > .lg_11 {
	width: 100%;
	grid-column-end: span 11;
}

.lg_10 {
	width: 83.33333333%;
	width: calc(100% / 12 * 10);
}
.flexbox > .lg_10 {
	width: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
}
.grid > .lg_10 {
	width: 100%;
	grid-column-end: span 10;
}

.lg_9 {
	width: 75%;
	width: calc(100% / 12 * 9);
}
.flexbox > .lg_9 {
	width: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
}
.grid > .lg_9 {
	width: 100%;
	grid-column-end: span 9;
}

.lg_8 {
	width: 66.66666667%;
	width: calc(100% / 12 * 8);
}
.flexbox > .lg_8 {
	width: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
}
.grid > .lg_8 {
	width: 100%;
	grid-column-end: span 8;
}

.lg_7 {
	width: 58.33333333%;
	width: calc(100% / 12 * 7);
}
.flexbox > .lg_7 {
	width: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
}
.grid > .lg_7 {
	width: 100%;
	grid-column-end: span 7;
}

.lg_6 {
	width: 50%;
	width: calc(100% / 12 * 6);
}
.flexbox > .lg_6 {
	width: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
}
.grid > .lg_6 {
	width: 100%;
	grid-column-end: span 6;
}

.lg_5 {
	width: 41.66666667%;
	width: calc(100% / 12 * 5);
}
.flexbox > .lg_5 {
	width: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
}
.grid > .lg_5 {
	width: 100%;
	grid-column-end: span 5;
}

.lg_4 {
	width: 33.33333333%;
	width: calc(100% / 12 * 4);
}
.flexbox > .lg_4 {
	width: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
}
.grid > .lg_4 {
	width: 100%;
	grid-column-end: span 4;
}

.lg_3 {
	width: 25%;
	width: calc(100% / 12 * 3);
}
.flexbox > .lg_3 {
	width: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
}
.grid > .lg_3 {
	width: 100%;
	grid-column-end: span 3;
}

.lg_2 {
	width: 16.66666667%;
	width: calc(100% / 12 * 2);
}
.flexbox > .lg_2 {
	width: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
}
.grid > .lg_2 {
	width: 100%;
	grid-column-end: span 2;
}

.lg_1 {
	width: 8.33333333%;
	width: calc(100% / 12 * 1);
}
.flexbox > .lg_1 {
	width: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
}
.grid > .lg_1 {
	width: 100%;
	grid-column-end: span 1;
}

/* DESKTOP SKIP */
.lg_skip_12 {
	margin-left: 100%;
	margin-left: calc(100% / 12 * 12);
}
.flexbox > .lg_skip_12 {
	margin-left: calc(100% / 12 * 12 + (var(--gap) / 11 * 12));
}
.grid > .lg_skip_12 {
	grid-column-start: 12;
}

.lg_skip_11 {
	margin-left: 91.66666667%;
	margin-left: calc(100% / 12 * 11);
}
.flexbox > .lg_skip_11 {
	margin-left: calc(100% / 12 * 11 + (var(--gap) / 11 * 11));
}
.grid > .lg_skip_11 {
	grid-column-start: 11;
}

.lg_skip_10 {
	margin-left: 83.33333333%;
	margin-left: calc(100% / 12 * 10);
}
.flexbox > .lg_skip_10 {
	margin-left: calc(100% / 12 * 10 + (var(--gap) / 11 * 10));
}
.grid > .lg_skip_10 {
	grid-column-start: 10;
}

.lg_skip_9 {
	margin-left: 75%;
	margin-left: calc(100% / 12 * 9);
}
.flexbox > .lg_skip_9 {
	margin-left: calc(100% / 12 * 9 + (var(--gap) / 11 * 9));
}
.grid > .lg_skip_9 {
	grid-column-start: 9;
}

.lg_skip_8 {
	margin-left: 66.66666667%;
	margin-left: calc(100% / 12 * 8);
}
.flexbox > .lg_skip_8 {
	margin-left: calc(100% / 12 * 8 + (var(--gap) / 11 * 8));
}
.grid > .lg_skip_8 {
	grid-column-start: 8;
}

.lg_skip_7 {
	margin-left: 58.33333333%;
	margin-left: calc(100% / 12 * 7);
}
.flexbox > .lg_skip_7 {
	margin-left: calc(100% / 12 * 7 + (var(--gap) / 11 * 7));
}
.grid > .lg_skip_7 {
	grid-column-start: 7;
}

.lg_skip_6 {
	margin-left: 50%;
	margin-left: calc(100% / 12 * 6);
}
.flexbox > .lg_skip_6 {
	margin-left: calc(100% / 12 * 6 + (var(--gap) / 11 * 6));
}
.grid > .lg_skip_6 {
	grid-column-start: 6;
}

.lg_skip_5 {
	margin-left: 41.66666667%;
	margin-left: calc(100% / 12 * 5);
}
.flexbox > .lg_skip_5 {
	margin-left: calc(100% / 12 * 5 + (var(--gap) / 11 * 5));
}
.grid > .lg_skip_5 {
	grid-column-start: 5;
}

.lg_skip_4 {
	margin-left: 33.33333333%;
	margin-left: calc(100% / 12 * 4);
}
.flexbox > .lg_skip_4 {
	margin-left: calc(100% / 12 * 4 + (var(--gap) / 11 * 4));
}
.grid > .lg_skip_4 {
	grid-column-start: 4;
}

.lg_skip_3 {
	margin-left: 25%;
	margin-left: calc(100% / 12 * 3);
}
.flexbox > .lg_skip_3 {
	margin-left: calc(100% / 12 * 3 + (var(--gap) / 11 * 3));
}
.grid > .lg_skip_3 {
	grid-column-start: 3;
}

.lg_skip_2 {
	margin-left: 16.66666667%;
	margin-left: calc(100% / 12 * 2);
}
.flexbox > .lg_skip_2 {
	margin-left: calc(100% / 12 * 2 + (var(--gap) / 11 * 2));
}
.grid > .lg_skip_2 {
	grid-column-start: 2;
}

.lg_skip_1 {
	margin-left: 8.33333333%;
	margin-left: calc(100% / 12 * 1);
}
.flexbox > .lg_skip_1 {
	margin-left: calc(100% / 12 * 1 + (var(--gap) / 11 * 1));
}
.grid > .lg_skip_1 {
	grid-column-start: 1;
}

/* TABLET */
@media only screen and (max-width: 1080px) {

	.bg_12 {
		width: 100%;
		width: calc(100% / 12 * 12);
	}
	.flexbox > .bg_12 {
		width: 100%;
	}
	.grid > .bg_12 {
		width: 100%;
		grid-column-end: span 12;
	}

	.bg_11 {
		width: 91.66666667%;
		width: calc(100% / 12 * 11);
	}
	.flexbox > .bg_11 {
		width: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
	}
	.grid > .bg_11 {
		width: 100%;
		grid-column-end: span 11;
	}

	.bg_10 {
		width: 83.33333333%;
		width: calc(100% / 12 * 10);
	}
	.flexbox > .bg_10 {
		width: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
	}
	.grid > .bg_10 {
		width: 100%;
		grid-column-end: span 10;
	}

	.bg_9 {
		width: 75%;
		width: calc(100% / 12 * 9);
	}
	.flexbox > .bg_9 {
		width: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
	}
	.grid > .bg_9 {
		width: 100%;
		grid-column-end: span 9;
	}

	.bg_8 {
		width: 66.66666667%;
		width: calc(100% / 12 * 8);
	}
	.flexbox > .bg_8 {
		width: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
	}
	.grid > .bg_8 {
		width: 100%;
		grid-column-end: span 8;
	}

	.bg_7 {
		width: 58.33333333%;
		width: calc(100% / 12 * 7);
	}
	.flexbox > .bg_7 {
		width: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
	}
	.grid > .bg_7 {
		width: 100%;
		grid-column-end: span 7;
	}

	.bg_6 {
		width: 50%;
		width: calc(100% / 12 * 6);
	}
	.flexbox > .bg_6 {
		width: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
	}
	.grid > .bg_6 {
		width: 100%;
		grid-column-end: span 6;
	}

	.bg_5 {
		width: 41.66666667%;
		width: calc(100% / 12 * 5);
	}
	.flexbox > .bg_5 {
		width: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
	}
	.grid > .bg_5 {
		width: 100%;
		grid-column-end: span 5;
	}

	.bg_4 {
		width: 33.33333333%;
		width: calc(100% / 12 * 4);
	}
	.flexbox > .bg_4 {
		width: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
	}
	.grid > .bg_4 {
		width: 100%;
		grid-column-end: span 4;
	}

	.bg_3 {
		width: 25%;
		width: calc(100% / 12 * 3);
	}
	.flexbox > .bg_3 {
		width: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
	}
	.grid > .bg_3 {
		width: 100%;
		grid-column-end: span 3;
	}

	.bg_2 {
		width: 16.66666667%;
		width: calc(100% / 12 * 2);
	}
	.flexbox > .bg_2 {
		width: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
	}
	.grid > .bg_2 {
		width: 100%;
		grid-column-end: span 2;
	}

	.bg_1 {
		width: 8.33333333%;
		width: calc(100% / 12 * 1);
	}
	.flexbox > .bg_1 {
		width: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
	}
	.grid > .bg_1 {
		width: 100%;
		grid-column-end: span 1;
	}

	/* DESKTOP SKIP */
	.bg_skip_12 {
		margin-left: 100%;
		margin-left: calc(100% / 12 * 12);
	}
	.flexbox > .bg_skip_12 {
		margin-left: calc(100% / 12 * 12 + (var(--gap) / 11 * 12));
	}
	.grid > .bg_skip_12 {
		grid-column-start: 12;
	}

	.bg_skip_11 {
		margin-left: 91.66666667%;
		margin-left: calc(100% / 12 * 11);
	}
	.flexbox > .bg_skip_11 {
		margin-left: calc(100% / 12 * 11 + (var(--gap) / 11 * 11));
	}
	.grid > .bg_skip_11 {
		grid-column-start: 11;
	}

	.bg_skip_10 {
		margin-left: 83.33333333%;
		margin-left: calc(100% / 12 * 10);
	}
	.flexbox > .bg_skip_10 {
		margin-left: calc(100% / 12 * 10 + (var(--gap) / 11 * 10));
	}
	.grid > .bg_skip_10 {
		grid-column-start: 10;
	}

	.bg_skip_9 {
		margin-left: 75%;
		margin-left: calc(100% / 12 * 9);
	}
	.flexbox > .bg_skip_9 {
		margin-left: calc(100% / 12 * 9 + (var(--gap) / 11 * 9));
	}
	.grid > .bg_skip_9 {
		grid-column-start: 9;
	}

	.bg_skip_8 {
		margin-left: 66.66666667%;
		margin-left: calc(100% / 12 * 8);
	}
	.flexbox > .bg_skip_8 {
		margin-left: calc(100% / 12 * 8 + (var(--gap) / 11 * 8));
	}
	.grid > .bg_skip_8 {
		grid-column-start: 8;
	}

	.bg_skip_7 {
		margin-left: 58.33333333%;
		margin-left: calc(100% / 12 * 7);
	}
	.flexbox > .bg_skip_7 {
		margin-left: calc(100% / 12 * 7 + (var(--gap) / 11 * 7));
	}
	.grid > .bg_skip_7 {
		grid-column-start: 7;
	}

	.bg_skip_6 {
		margin-left: 50%;
		margin-left: calc(100% / 12 * 6);
	}
	.flexbox > .bg_skip_6 {
		margin-left: calc(100% / 12 * 6 + (var(--gap) / 11 * 6));
	}
	.grid > .bg_skip_6 {
		grid-column-start: 6;
	}

	.bg_skip_5 {
		margin-left: 41.66666667%;
		margin-left: calc(100% / 12 * 5);
	}
	.flexbox > .bg_skip_5 {
		margin-left: calc(100% / 12 * 5 + (var(--gap) / 11 * 5));
	}
	.grid > .bg_skip_5 {
		grid-column-start: 5;
	}

	.bg_skip_4 {
		margin-left: 33.33333333%;
		margin-left: calc(100% / 12 * 4);
	}
	.flexbox > .bg_skip_4 {
		margin-left: calc(100% / 12 * 4 + (var(--gap) / 11 * 4));
	}
	.grid > .bg_skip_4 {
		grid-column-start: 4;
	}

	.bg_skip_3 {
		margin-left: 25%;
		margin-left: calc(100% / 12 * 3);
	}
	.flexbox > .bg_skip_3 {
		margin-left: calc(100% / 12 * 3 + (var(--gap) / 11 * 3));
	}
	.grid > .bg_skip_3 {
		grid-column-start: 3;
	}

	.bg_skip_2 {
		margin-left: 16.66666667%;
		margin-left: calc(100% / 12 * 2);
	}
	.flexbox > .bg_skip_2 {
		margin-left: calc(100% / 12 * 2 + (var(--gap) / 11 * 2));
	}
	.grid > .bg_skip_2 {
		grid-column-start: 2;
	}

	.bg_skip_1 {
		margin-left: 8.33333333%;
		margin-left: calc(100% / 12 * 1);
	}
	.flexbox > .bg_skip_1 {
		margin-left: calc(100% / 12 * 1 + (var(--gap) / 11 * 1));
	}
	.grid > .bg_skip_1 {
		grid-column-start: 1;
	}
}

/* TABLET */
@media only screen and (max-width: 768px) {

	.md_12 {
		width: 100%;
		width: calc(100% / 12 * 12);
	}
	.flexbox > .md_12 {
		width: 100%;
	}
	.grid > .md_12 {
		width: 100%;
		grid-column-end: span 12;
	}

	.md_11 {
		width: 91.66666667%;
		width: calc(100% / 12 * 11);
	}
	.flexbox > .md_11 {
		width: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
	}
	.grid > .md_11 {
		width: 100%;
		grid-column-end: span 11;
	}

	.md_10 {
		width: 83.33333333%;
		width: calc(100% / 12 * 10);
	}
	.flexbox > .md_10 {
		width: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
	}
	.grid > .md_10 {
		width: 100%;
		grid-column-end: span 10;
	}

	.md_9 {
		width: 75%;
		width: calc(100% / 12 * 9);
	}
	.flexbox > .md_9 {
		width: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
	}
	.grid > .md_9 {
		width: 100%;
		grid-column-end: span 9;
	}

	.md_8 {
		width: 66.66666667%;
		width: calc(100% / 12 * 8);
	}
	.flexbox > .md_8 {
		width: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
	}
	.grid > .md_8 {
		width: 100%;
		grid-column-end: span 8;
	}

	.md_7 {
		width: 58.33333333%;
		width: calc(100% / 12 * 7);
	}
	.flexbox > .md_7 {
		width: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
	}
	.grid > .md_7 {
		width: 100%;
		grid-column-end: span 7;
	}

	.md_6 {
		width: 50%;
		width: calc(100% / 12 * 6);
	}
	.flexbox > .md_6 {
		width: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
	}
	.grid > .md_6 {
		width: 100%;
		grid-column-end: span 6;
	}

	.md_5 {
		width: 41.66666667%;
		width: calc(100% / 12 * 5);
	}
	.flexbox > .md_5 {
		width: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
	}
	.grid > .md_5 {
		width: 100%;
		grid-column-end: span 5;
	}

	.md_4 {
		width: 33.33333333%;
		width: calc(100% / 12 * 4);
	}
	.flexbox > .md_4 {
		width: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
	}
	.grid > .md_4 {
		width: 100%;
		grid-column-end: span 4;
	}

	.md_3 {
		width: 25%;
		width: calc(100% / 12 * 3);
	}
	.flexbox > .md_3 {
		width: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
	}
	.grid > .md_3 {
		width: 100%;
		grid-column-end: span 3;
	}

	.md_2 {
		width: 16.66666667%;
		width: calc(100% / 12 * 2);
	}
	.flexbox > .md_2 {
		width: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
	}
	.grid > .md_2 {
		width: 100%;
		grid-column-end: span 2;
	}

	.md_1 {
		width: 8.33333333%;
		width: calc(100% / 12 * 1);
	}
	.flexbox > .md_1 {
		width: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
	}
	.grid > .md_1 {
		width: 100%;
		grid-column-end: span 1;
	}

	/* DESKTOP SKIP */
	.md_skip_12 {
		margin-left: 100%;
		margin-left: calc(100% / 12 * 12);
	}
	.flexbox > .md_skip_12 {
		margin-left: calc(100% / 12 * 12 + (var(--gap) / 11 * 12));
	}
	.grid > .md_skip_12 {
		grid-column-start: 12;
	}

	.md_skip_11 {
		margin-left: 91.66666667%;
		margin-left: calc(100% / 12 * 11);
	}
	.flexbox > .md_skip_11 {
		margin-left: calc(100% / 12 * 11 + (var(--gap) / 11 * 11));
	}
	.grid > .md_skip_11 {
		grid-column-start: 11;
	}

	.md_skip_10 {
		margin-left: 83.33333333%;
		margin-left: calc(100% / 12 * 10);
	}
	.flexbox > .md_skip_10 {
		margin-left: calc(100% / 12 * 10 + (var(--gap) / 11 * 10));
	}
	.grid > .md_skip_10 {
		grid-column-start: 10;
	}

	.md_skip_9 {
		margin-left: 75%;
		margin-left: calc(100% / 12 * 9);
	}
	.flexbox > .md_skip_9 {
		margin-left: calc(100% / 12 * 9 + (var(--gap) / 11 * 9));
	}
	.grid > .md_skip_9 {
		grid-column-start: 9;
	}

	.md_skip_8 {
		margin-left: 66.66666667%;
		margin-left: calc(100% / 12 * 8);
	}
	.flexbox > .md_skip_8 {
		margin-left: calc(100% / 12 * 8 + (var(--gap) / 11 * 8));
	}
	.grid > .md_skip_8 {
		grid-column-start: 8;
	}

	.md_skip_7 {
		margin-left: 58.33333333%;
		margin-left: calc(100% / 12 * 7);
	}
	.flexbox > .md_skip_7 {
		margin-left: calc(100% / 12 * 7 + (var(--gap) / 11 * 7));
	}
	.grid > .md_skip_7 {
		grid-column-start: 7;
	}

	.md_skip_6 {
		margin-left: 50%;
		margin-left: calc(100% / 12 * 6);
	}
	.flexbox > .md_skip_6 {
		margin-left: calc(100% / 12 * 6 + (var(--gap) / 11 * 6));
	}
	.grid > .md_skip_6 {
		grid-column-start: 6;
	}

	.md_skip_5 {
		margin-left: 41.66666667%;
		margin-left: calc(100% / 12 * 5);
	}
	.flexbox > .md_skip_5 {
		margin-left: calc(100% / 12 * 5 + (var(--gap) / 11 * 5));
	}
	.grid > .md_skip_5 {
		grid-column-start: 5;
	}

	.md_skip_4 {
		margin-left: 33.33333333%;
		margin-left: calc(100% / 12 * 4);
	}
	.flexbox > .md_skip_4 {
		margin-left: calc(100% / 12 * 4 + (var(--gap) / 11 * 4));
	}
	.grid > .md_skip_4 {
		grid-column-start: 4;
	}

	.md_skip_3 {
		margin-left: 25%;
		margin-left: calc(100% / 12 * 3);
	}
	.flexbox > .md_skip_3 {
		margin-left: calc(100% / 12 * 3 + (var(--gap) / 11 * 3));
	}
	.grid > .md_skip_3 {
		grid-column-start: 3;
	}

	.md_skip_2 {
		margin-left: 16.66666667%;
		margin-left: calc(100% / 12 * 2);
	}
	.flexbox > .md_skip_2 {
		margin-left: calc(100% / 12 * 2 + (var(--gap) / 11 * 2));
	}
	.grid > .md_skip_2 {
		grid-column-start: 2;
	}

	.md_skip_1 {
		margin-left: 8.33333333%;
		margin-left: calc(100% / 12 * 1);
	}
	.flexbox > .md_skip_1 {
		margin-left: calc(100% / 12 * 1 + (var(--gap) / 11 * 1));
	}
	.grid > .md_skip_1 {
		grid-column-start: 1;
	}
}

/* MOBILE  */
@media only screen and (max-width: 480px) {

	.sm_12 {
		width: 100%;
		width: calc(100% / 12 * 12);
	}
	.flexbox > .sm_12 {
		width: 100%;
	}
	.grid > .sm_12 {
		width: 100%;
		grid-column-end: span 12;
	}

	.sm_11 {
		width: 91.66666667%;
		width: calc(100% / 12 * 11);
	}
	.flexbox > .sm_11 {
		width: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
	}
	.grid > .sm_11 {
		width: 100%;
		grid-column-end: span 11;
	}

	.sm_10 {
		width: 83.33333333%;
		width: calc(100% / 12 * 10);
	}
	.flexbox > .sm_10 {
		width: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
	}
	.grid > .sm_10 {
		width: 100%;
		grid-column-end: span 10;
	}

	.sm_9 {
		width: 75%;
		width: calc(100% / 12 * 9);
	}
	.flexbox > .sm_9 {
		width: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
	}
	.grid > .sm_9 {
		width: 100%;
		grid-column-end: span 9;
	}

	.sm_8 {
		width: 66.66666667%;
		width: calc(100% / 12 * 8);
	}
	.flexbox > .sm_8 {
		width: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
	}
	.grid > .sm_8 {
		width: 100%;
		grid-column-end: span 8;
	}

	.sm_7 {
		width: 58.33333333%;
		width: calc(100% / 12 * 7);
	}
	.flexbox > .sm_7 {
		width: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
	}
	.grid > .sm_7 {
		width: 100%;
		grid-column-end: span 7;
	}

	.sm_6 {
		width: 50%;
		width: calc(100% / 12 * 6);
	}
	.flexbox > .sm_6 {
		width: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
	}
	.grid > .sm_6 {
		width: 100%;
		grid-column-end: span 6;
	}

	.sm_5 {
		width: 41.66666667%;
		width: calc(100% / 12 * 5);
	}
	.flexbox > .sm_5 {
		width: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
	}
	.grid > .sm_5 {
		width: 100%;
		grid-column-end: span 5;
	}

	.sm_4 {
		width: 33.33333333%;
		width: calc(100% / 12 * 4);
	}
	.flexbox > .sm_4 {
		width: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
	}
	.grid > .sm_4 {
		width: 100%;
		grid-column-end: span 4;
	}

	.sm_3 {
		width: 25%;
		width: calc(100% / 12 * 3);
	}
	.flexbox > .sm_3 {
		width: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
	}
	.grid > .sm_3 {
		width: 100%;
		grid-column-end: span 3;
	}

	.sm_2 {
		width: 16.66666667%;
		width: calc(100% / 12 * 2);
	}
	.flexbox > .sm_2 {
		width: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
	}
	.grid > .sm_2 {
		width: 100%;
		grid-column-end: span 2;
	}

	.sm_1 {
		width: 8.33333333%;
		width: calc(100% / 12 * 1);
	}
	.flexbox > .sm_1 {
		width: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
	}
	.grid > .sm_1 {
		width: 100%;
		grid-column-end: span 1;
	}

	/* DESKTOP SKIP */
	.sm_skip_12 {
		margin-left: 100%;
		margin-left: calc(100% / 12 * 12);
	}
	.flexbox > .sm_skip_12 {
		margin-left: calc(100% / 12 * 12 + (var(--gap) / 11 * 12));
	}
	.grid > .sm_skip_12 {
		grid-column-start: 12;
	}

	.sm_skip_11 {
		margin-left: 91.66666667%;
		margin-left: calc(100% / 12 * 11);
	}
	.flexbox > .sm_skip_11 {
		margin-left: calc(100% / 12 * 11 + (var(--gap) / 11 * 11));
	}
	.grid > .sm_skip_11 {
		grid-column-start: 11;
	}

	.sm_skip_10 {
		margin-left: 83.33333333%;
		margin-left: calc(100% / 12 * 10);
	}
	.flexbox > .sm_skip_10 {
		margin-left: calc(100% / 12 * 10 + (var(--gap) / 11 * 10));
	}
	.grid > .sm_skip_10 {
		grid-column-start: 10;
	}

	.sm_skip_9 {
		margin-left: 75%;
		margin-left: calc(100% / 12 * 9);
	}
	.flexbox > .sm_skip_9 {
		margin-left: calc(100% / 12 * 9 + (var(--gap) / 11 * 9));
	}
	.grid > .sm_skip_9 {
		grid-column-start: 9;
	}

	.sm_skip_8 {
		margin-left: 66.66666667%;
		margin-left: calc(100% / 12 * 8);
	}
	.flexbox > .sm_skip_8 {
		margin-left: calc(100% / 12 * 8 + (var(--gap) / 11 * 8));
	}
	.grid > .sm_skip_8 {
		grid-column-start: 8;
	}

	.sm_skip_7 {
		margin-left: 58.33333333%;
		margin-left: calc(100% / 12 * 7);
	}
	.flexbox > .sm_skip_7 {
		margin-left: calc(100% / 12 * 7 + (var(--gap) / 11 * 7));
	}
	.grid > .sm_skip_7 {
		grid-column-start: 7;
	}

	.sm_skip_6 {
		margin-left: 50%;
		margin-left: calc(100% / 12 * 6);
	}
	.flexbox > .sm_skip_6 {
		margin-left: calc(100% / 12 * 6 + (var(--gap) / 11 * 6));
	}
	.grid > .sm_skip_6 {
		grid-column-start: 6;
	}

	.sm_skip_5 {
		margin-left: 41.66666667%;
		margin-left: calc(100% / 12 * 5);
	}
	.flexbox > .sm_skip_5 {
		margin-left: calc(100% / 12 * 5 + (var(--gap) / 11 * 5));
	}
	.grid > .sm_skip_5 {
		grid-column-start: 5;
	}

	.sm_skip_4 {
		margin-left: 33.33333333%;
		margin-left: calc(100% / 12 * 4);
	}
	.flexbox > .sm_skip_4 {
		margin-left: calc(100% / 12 * 4 + (var(--gap) / 11 * 4));
	}
	.grid > .sm_skip_4 {
		grid-column-start: 4;
	}

	.sm_skip_3 {
		margin-left: 25%;
		margin-left: calc(100% / 12 * 3);
	}
	.flexbox > .sm_skip_3 {
		margin-left: calc(100% / 12 * 3 + (var(--gap) / 11 * 3));
	}
	.grid > .sm_skip_3 {
		grid-column-start: 3;
	}

	.sm_skip_2 {
		margin-left: 16.66666667%;
		margin-left: calc(100% / 12 * 2);
	}
	.flexbox > .sm_skip_2 {
		margin-left: calc(100% / 12 * 2 + (var(--gap) / 11 * 2));
	}
	.grid > .sm_skip_2 {
		grid-column-start: 2;
	}

	.sm_skip_1 {
		margin-left: 8.33333333%;
		margin-left: calc(100% / 12 * 1);
	}
	.flexbox > .sm_skip_1 {
		margin-left: calc(100% / 12 * 1 + (var(--gap) / 11 * 1));
	}
	.grid > .sm_skip_1 {
		grid-column-start: 1;
	}
}