/*

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);
  list-style: none;
}

.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);
  list-style: none;
}

.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;
  }
}