/*

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

*/


:root {
  --lg_12: 100%;
  --lg_11: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
  --lg_10: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
  --lg_9: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
  --lg_8: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
  --lg_7: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
  --lg_6: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
  --lg_5: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
  --lg_4: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
  --lg_3: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
  --lg_2: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
  --lg_1: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
}


@media only screen and (max-width: 1080px) {
  :root {
    --bg_12: 100%;
    --bg_11: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
    --bg_10: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
    --bg_9: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
    --bg_8: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
    --bg_7: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
    --bg_6: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
    --bg_5: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
    --bg_4: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
    --bg_3: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
    --bg_2: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
    --bg_1: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --md_12: 100%;
    --md_11: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
    --md_10: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
    --md_9: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
    --md_8: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
    --md_7: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
    --md_6: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
    --md_5: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
    --md_4: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
    --md_3: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
    --md_2: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
    --md_1: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
  }
}

@media only screen and (max-width: 480px) {
  :root {
    --sm_12: 100%;
    --sm_11: calc(100% / 12 * 11 - (var(--gap) / 11 * 11));
    --sm_10: calc(100% / 12 * 10 - (var(--gap) / 11 * 10));
    --sm_9: calc(100% / 12 * 9 - (var(--gap) / 11 * 9));
    --sm_8: calc(100% / 12 * 8 - (var(--gap) / 11 * 8));
    --sm_7: calc(100% / 12 * 7 - (var(--gap) / 11 * 7));
    --sm_6: calc(100% / 12 * 6 - (var(--gap) / 11 * 6));
    --sm_5: calc(100% / 12 * 5 - (var(--gap) / 11 * 5));
    --sm_4: calc(100% / 12 * 4 - (var(--gap) / 11 * 4));
    --sm_3: calc(100% / 12 * 3 - (var(--gap) / 11 * 3));
    --sm_2: calc(100% / 12 * 2 - (var(--gap) / 11 * 2));
    --sm_1: calc(100% / 12 * 1 - (var(--gap) / 11 * 1));
  }
}

/*  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;
  }
}