/*------------------
    CSS GRID



/* /////////// DEFINITIONEN ///////////

1. GRID Container
2. REIHEN / SPALTEN
3. GAPS
4. SPACINGS (Margins & Paddings)
5. POSITIONING (Ausrichtung oben, rechts, unten, links)
6. TEXT-AUSRICHTUNG (links, center, rechts, justified)
7. HAUPT-CONTAINER (#containerM, #containerP etc.)

/////////// /////////// //////////// */





/* /////////// BREAKPOINTS ///////////

1100px = L
 900px = M
 700px = S
 450px = XS

/////////// /////////// //////////// */



.newsflash.grid, .grid {
    position: relative;
    display: grid;
    row-gap: 1em;
    column-gap: clamp(0.4em, 1vw, 1em);
    grid-auto-rows: minmax(min-content, max-content);
    /*width: 100%;*/
}



/*------------------------------------------------------------------------------------------------------------------------------
                                                        1 GRID CONTAINER
------------------------------------------------------------------------------------------------------------------------------*/



  .grid.cols-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid.cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid.cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid.cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid.cols-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid.cols-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  .grid.cols-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid.cols-12 {
    grid-template-columns: repeat(12, 1fr);
  }

  .grid.rows-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .grid.rows-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .grid.rows-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .grid.rows-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .grid.rows-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .grid.rows-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .grid.rows-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .grid.rows-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .grid.rows-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .grid.rows-10 {
    grid-template-rows: repeat(10, 1fr);
  }
  .grid.rows-11 {
    grid-template-rows: repeat(11, 1fr);
  }
  .grid.rows-12 {
    grid-template-rows: repeat(12, 1fr);
  }




/*------------------------------------------------------------------------------------------------------------------------------
                                                        2 REIHEN / SPALTEN
------------------------------------------------------------------------------------------------------------------------------*/


.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
} 

/* SPALTEN */

.col-1 {
    grid-column: 1;
}
.col-2 {
    grid-column: 2;
}
.col-3 {
    grid-column: 3;
}
.col-4 {
    grid-column: 4;
}
.col-5 {
    grid-column: 5;
}
.col-6 {
    grid-column: 6;
}
.col-7 {
    grid-column: 7;
}
.col-8 {
    grid-column: 8;
}
.col-9 {
    grid-column: 9;
}
.col-10 {
    grid-column: 10;
}
.col-11 {
    grid-column: 11;
}
.col-12 {
    grid-column: 12;
}




    /* SPALTEN SPANNE - col-spalte-spanne */

    .col-1-1 {
        grid-column: 1 / span 1;
    }

    .col-1-2 {
        grid-column: 1 / span 2;
    }
    .col-1-3 {
        grid-column: 1 / span 3;
    }
    .col-1-4 {
        grid-column: 1 / span 4;
    }
    .col-1-5 {
        grid-column: 1 / span 5;
    }
    .col-1-6 {
        grid-column: 1 / span 6;
    }
    .col-1-7 {
        grid-column: 1 / span 7;
    }
    .col-1-8 {
        grid-column: 1 / span 8;
    }
    .col-1-9 {
        grid-column: 1 / span 9;
    }
    .col-1-10 {
        grid-column: 1 / span 10;
    }
    .col-1-11 {
        grid-column: 1 / span 11;
    }
    .col-1-12 {
        grid-column: 1 / span 12;
    }
    .col-2-2 {
        grid-column: 2 / span 2;
    }
    .col-2-3 {
        grid-column: 2 / span 3;
    }
    .col-2-4 {
        grid-column: 2 / span 4;
    }
    .col-2-5 {
        grid-column: 2 / span 5;
    }
    .col-2-6 {
        grid-column: 2 / span 6;
    }
    .col-2-7 {
        grid-column: 2 / span 7;
    }
    .col-2-8 {
        grid-column: 2 / span 8;
    }
    .col-2-9 {
        grid-column: 2 / span 9;
    }
    .col-2-10 {
        grid-column: 2 / span 10;
    }
    .col-2-11 {
        grid-column: 2 / span 11;
    }
    .col-3-2 {
        grid-column: 3 / span 2;
    }
    .col-3-3 {
        grid-column: 3 / span 3;
    }
    .col-3-4 {
        grid-column: 3 / span 4;
    }
    .col-3-5 {
        grid-column: 3 / span 5;
    }
    .col-3-6 {
        grid-column: 3 / span 6;
    }
    .col-3-7 {
        grid-column: 3 / span 7;
    }
    .col-3-8 {
        grid-column: 3 / span 8;
    }
    .col-3-9 {
        grid-column: 3 / span 9;
    }
    .col-3-10 {
        grid-column: 3 / span 10;
    }
    .col-4-2 {
        grid-column: 4 / span 2;
    }
    .col-4-3 {
        grid-column: 4 / span 3;
    }
    .col-4-4 {
        grid-column: 4 / span 5;
    }
    .col-4-5 {
        grid-column: 4 / span 5;
    }
    .col-4-6 {
        grid-column: 4 / span 6;
    }
    .col-4-7 {
        grid-column: 4 / span 7;
    }
    .col-4-8 {
        grid-column: 4 / span 8;
    }
    .col-4-9 {
        grid-column: 4 / span 9;
    }
    .col-5-2 {
        grid-column: 5 / span 2;
    }
    .col-5-3 {
        grid-column: 5 / span 3;
    }
    .col-5-4 {
        grid-column: 5 / span 4;
    }
    .col-5-5 {
        grid-column: 5 / span 5;
    }
    .col-5-6 {
        grid-column: 5 / span 6;
    }
    .col-5-7 {
        grid-column: 5 / span 7;
    }
    .col-5-8 {
        grid-column: 5 / span 8;
    }
    .col-6-2 {
        grid-column: 6 / span 2;
    }
    .col-6-3 {
        grid-column: 6 / span 3;
    }
    .col-6-4 {
        grid-column: 6 / span 4;
    }
    .col-6-5 {
        grid-column: 6 / span 5;
    }
    .col-6-6 {
        grid-column: 6 / span 6;
    }
    .col-6-7 {
        grid-column: 6 / span 7;
    }
    .col-7-2 {
        grid-column: 7 / span 2;
    }
    .col-7-3 {
        grid-column: 7 / span 3;
    }
    .col-7-4 {
        grid-column: 7 / span 4;
    }
    .col-7-5 {
        grid-column: 7 / span 5;
    }
    .col-7-6 {
        grid-column: 7 / span 6;
    }
    .col-8-2 {
        grid-column: 8 / span 2;
    }
    .col-8-3 {
        grid-column: 8 / span 3;
    }
    .col-8-4 {
        grid-column: 8 / span 4;
    }
    .col-8-5 {
        grid-column: 8 / span 5;
    }
    .col-9-2 {
        grid-column: 9 / span 2;
    }
    .col-9-3 {
        grid-column: 9 / span 3;
    }
    .col-9-4 {
        grid-column: 9 / span 4;
    }
    .col-10-2 {
        grid-column: 10 / span 2;
    }
    .col-10-3 {
        grid-column: 10 / span 3;
    }
    .col-11-2 {
        grid-column: 11 / span 2;
    }





    /* REIHEN */

    .row-1, .row-2, .row-3, .row-4, .row-5, .row-6, .row-7, .row-8, .row-9, .row-10, .row-11, .row-12 {
        position: relative;
    } 

    .row-1 {
        grid-row: 1;
    }
    .row-2 {
        grid-row: 2;
    }
    .row-3 {
        grid-row: 3;
    }
    .row-4 {
        grid-row: 4;
    }
    .row-5 {
        grid-row: 5;
    }
    .row-6 {
        grid-row: 6;
    }
    .row-7 {
        grid-row: 7;
    }
    .row-8 {
        grid-row: 8;
    }
    .row-9 {
        grid-row: 9;
    }
    .row-10 {
        grid-row: 10;
    }
    .row-11 {
        grid-row: 11;
    }
    .row-12 {
        grid-row: 12;
    }





    /* REIHEN SPANNE - row-reihe-spanne */

    .row-1-2 {
        grid-row: 1 / span 2;
    }
    .row-1-3 {
        grid-row: 1 / span 3;
    }
    .row-1-4 {
        grid-row: 1 / span 4;
    }
    .row-1-5 {
        grid-row: 1 / span 5;
    }
    .row-1-6 {
        grid-row: 1 / span 6;
    }
    .row-1-7 {
        grid-row: 1 / span 7;
    }
    .row-1-8 {
        grid-row: 1 / span 8;
    }
    .row-1-9 {
        grid-row: 1 / span 9;
    }
    .row-1-10 {
        grid-row: 1 / span 10;
    }
    .row-1-11 {
        grid-row: 1 / span 11;
    }
    .row-1-12 {
        grid-row: 1 / span 12;
    }
    .row-2-2 {
        grid-row: 2 / span 2;
    }
    .row-2-3 {
        grid-row: 2 / span 3;
    }
    .row-2-4 {
        grid-row: 2 / span 4;
    }
    .row-2-5 {
        grid-row: 2 / span 5;
    }
    .row-2-6 {
        grid-row: 2 / span 6;
    }
    .row-2-7 {
        grid-row: 2 / span 7;
    }
    .row-2-8 {
        grid-row: 2 / span 8;
    }
    .row-2-9 {
        grid-row: 2 / span 9;
    }
    .row-2-10 {
        grid-row: 2 / span 10;
    }
    .row-2-11 {
        grid-row: 2 / span 11;
    }
    .row-3-2 {
        grid-row: 3 / span 2;
    }
    .row-3-3 {
        grid-row: 3 / span 3;
    }
    .row-3-4 {
        grid-row: 3 / span 4;
    }
    .row-3-5 {
        grid-row: 3 / span 5;
    }
    .row-3-6 {
        grid-row: 3 / span 6;
    }
    .row-3-7 {
        grid-row: 3 / span 7;
    }
    .row-3-8 {
        grid-row: 3 / span 8;
    }
    .row-3-9 {
        grid-row: 3 / span 9;
    }
    .row-3-10 {
        grid-row: 3 / span 10;
    }
    .row-4-2 {
        grid-row: 4 / span 2;
    }
    .row-4-3 {
        grid-row: 4 / span 3;
    }
    .row-4-4 {
        grid-row: 4 / span 5;
    }
    .row-4-5 {
        grid-row: 4 / span 5;
    }
    .row-4-6 {
        grid-row: 4 / span 6;
    }
    .row-4-7 {
        grid-row: 4 / span 7;
    }
    .row-4-8 {
        grid-row: 4 / span 8;
    }
    .row-4-9 {
        grid-row: 4 / span 9;
    }
    .row-5-2 {
        grid-row: 5 / span 2;
    }
    .row-5-3 {
        grid-row: 5 / span 3;
    }
    .row-5-4 {
        grid-row: 5 / span 4;
    }
    .row-5-5 {
        grid-row: 5 / span 5;
    }
    .row-5-6 {
        grid-row: 5 / span 6;
    }
    .row-5-7 {
        grid-row: 5 / span 7;
    }
    .row-5-8 {
        grid-row: 5 / span 8;
    }
    .row-6-2 {
        grid-row: 6 / span 2;
    }
    .row-6-3 {
        grid-row: 6 / span 3;
    }
    .row-6-4 {
        grid-row: 6 / span 4;
    }
    .row-6-5 {
        grid-row: 6 / span 5;
    }
    .row-6-6 {
        grid-row: 6 / span 6;
    }
    .row-6-7 {
        grid-row: 6 / span 7;
    }
    .row-7-2 {
        grid-row: 7 / span 2;
    }
    .row-7-3 {
        grid-row: 7 / span 3;
    }
    .row-7-4 {
        grid-row: 7 / span 4;
    }
    .row-7-5 {
        grid-row: 7 / span 5;
    }
    .row-7-6 {
        grid-row: 7 / span 6;
    }
    .row-8-2 {
        grid-row: 8 / span 2;
    }
    .row-8-3 {
        grid-row: 8 / span 3;
    }
    .row-8-4 {
        grid-row: 8 / span 4;
    }
    .row-8-5 {
        grid-row: 8 / span 5;
    }
    .row-9-2 {
        grid-row: 9 / span 2;
    }
    .row-9-3 {
        grid-row: 9 / span 3;
    }
    .row-9-4 {
        grid-row: 9 / span 4;
    }
    .row-10-2 {
        grid-row: 10 / span 2;
    }
    .row-10-3 {
        grid-row: 10 / span 3;
    }
    .row-11-2 {
        grid-row: 11 / span 2;
    }




/* ===================================== RESPONSIVE ===================================== */

/* LARGE L */

@media only screen and (max-width: 1100px) {


        .grid.cols-l-1 {
            grid-template-columns: repeat(1, 1fr);
        }
      .grid.cols-l-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid.cols-l-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .grid.cols-l-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .grid.cols-l-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      .grid.cols-l-6 {
        grid-template-columns: repeat(6, 1fr);
      }
      .grid.cols-l-7 {
        grid-template-columns: repeat(7, 1fr);
      }
      .grid.cols-l-8 {
        grid-template-columns: repeat(8, 1fr);
      }
      .grid.cols-l-9 {
        grid-template-columns: repeat(9, 1fr);
      }
      .grid.cols-l-10 {
        grid-template-columns: repeat(10, 1fr);
      }
      .grid.cols-l-11 {
        grid-template-columns: repeat(11, 1fr);
      }
      .grid.cols-l-12 {
        grid-template-columns: repeat(12, 1fr);
      }

    .grid.rows-l-1 {
        grid-template-rows: repeat(1, 1fr);
    }
    .grid.rows-l-2 {
        grid-template-rows: repeat(2, 1fr);
    }
    .grid.rows-l-3 {
        grid-template-rows: repeat(3, 1fr);
    }
    .grid.rows-l-4 {
        grid-template-rows: repeat(4, 1fr);
    }
    .grid.rows-l-5 {
        grid-template-rows: repeat(5, 1fr);
    }
    .grid.rows-l-6 {
        grid-template-rows: repeat(6, 1fr);
    }
    .grid.rows-l-7 {
        grid-template-rows: repeat(7, 1fr);
    }
    .grid.rows-l-8 {
        grid-template-rows: repeat(8, 1fr);
    }
    .grid.rows-l-9 {
        grid-template-rows: repeat(9, 1fr);
    }
    .grid.rows-l-10 {
        grid-template-rows: repeat(10, 1fr);
    }
    .grid.rows-l-11 {
        grid-template-rows: repeat(11, 1fr);
    }
    .grid.rows-l-12 {
        grid-template-rows: repeat(12, 1fr);
    }



/* Columns */

    .col-l-1 {
        grid-column: 1;
    }
    .col-l-2 {
        grid-column: 2;
    }
    .col-l-3 {
        grid-column: 3;
    }
    .col-l-4 {
        grid-column: 4;
    }
    .col-l-5 {
        grid-column: 5;
    }
    .col-l-6 {
        grid-column: 6;
    }
    .col-l-7 {
        grid-column: 7;
    }
    .col-l-8 {
        grid-column: 8;
    }
    .col-l-9 {
        grid-column: 9;
    }
    .col-l-10 {
        grid-column: 10;
    }
    .col-l-11 {
        grid-column: 11;
    }
    .col-l-12 {
        grid-column: 12;
    }


/* Rows */

    .row-l-1 {
        grid-row: 1;
    }
    .row-l-2 {
        grid-row: 2;
    }
    .row-l-3 {
        grid-row: 3;
    }
    .row-l-4 {
        grid-row: 4;
    }
    .row-l-5 {
        grid-row: 5;
    }
    .row-l-6 {
        grid-row: 6;
    }
    .row-l-7 {
        grid-row: 7;
    }
    .row-l-8 {
        grid-row: 8;
    }
    .row-l-9 {
        grid-row: 9;
    }
    .row-l-10 {
        grid-row: 10;
    }
    .row-l-11 {
        grid-row: 11;
    }
    .row-l-12 {
        grid-row: 12;
    }



/* SPALTEN SPANNE - col-spalte-spanne */

    .col-l-1-2 {
    grid-column: 1 / span 2;
    }
    .col-l-1-3 {
        grid-column: 1 / span 3;
    }
    .col-l-1-4 {
        grid-column: 1 / span 4;
    }
    .col-l-1-5 {
        grid-column: 1 / span 5;
    }
    .col-l-1-6 {
        grid-column: 1 / span 6;
    }
    .col-l-1-7 {
        grid-column: 1 / span 7;
    }
    .col-l-1-8 {
        grid-column: 1 / span 8;
    }
    .col-l-1-9 {
        grid-column: 1 / span 9;
    }
    .col-l-1-10 {
        grid-column: 1 / span 10;
    }
    .col-l-1-11 {
        grid-column: 1 / span 11;
    }
    .col-l-1-12 {
        grid-column: 1 / span 12;
    }
    .col-l-2-2 {
        grid-column: 2 / span 2;
    }
    .col-l-2-3 {
        grid-column: 2 / span 3;
    }
    .col-l-2-4 {
        grid-column: 2 / span 4;
    }
    .col-l-2-5 {
        grid-column: 2 / span 5;
    }
    .col-l-2-6 {
        grid-column: 2 / span 6;
    }
    .col-l-2-7 {
        grid-column: 2 / span 7;
    }
    .col-l-2-8 {
        grid-column: 2 / span 8;
    }
    .col-l-2-9 {
        grid-column: 2 / span 9;
    }
    .col-l-2-10 {
        grid-column: 2 / span 10;
    }
    .col-l-2-11 {
        grid-column: 2 / span 11;
    }
    .col-l-3-2 {
        grid-column: 3 / span 2;
    }
    .col-l-3-3 {
        grid-column: 3 / span 3;
    }
    .col-l-3-4 {
        grid-column: 3 / span 4;
    }
    .col-l-3-5 {
        grid-column: 3 / span 5;
    }
    .col-l-3-6 {
        grid-column: 3 / span 6;
    }
    .col-l-3-7 {
        grid-column: 3 / span 7;
    }
    .col-l-3-8 {
        grid-column: 3 / span 8;
    }
    .col-l-3-9 {
        grid-column: 3 / span 9;
    }
    .col-l-3-10 {
        grid-column: 3 / span 10;
    }
    .col-l-4-2 {
        grid-column: 4 / span 2;
    }
    .col-l-4-3 {
        grid-column: 4 / span 3;
    }
    .col-l-4-4 {
        grid-column: 4 / span 5;
    }
    .col-l-4-5 {
        grid-column: 4 / span 5;
    }
    .col-l-4-6 {
        grid-column: 4 / span 6;
    }
    .col-l-4-7 {
        grid-column: 4 / span 7;
    }
    .col-l-4-8 {
        grid-column: 4 / span 8;
    }
    .col-l-4-9 {
        grid-column: 4 / span 9;
    }
    .col-l-5-2 {
        grid-column: 5 / span 2;
    }
    .col-l-5-3 {
        grid-column: 5 / span 3;
    }
    .col-l-5-4 {
        grid-column: 5 / span 4;
    }
    .col-l-5-5 {
        grid-column: 5 / span 5;
    }
    .col-l-5-6 {
        grid-column: 5 / span 6;
    }
    .col-l-5-7 {
        grid-column: 5 / span 7;
    }
    .col-l-5-8 {
        grid-column: 5 / span 8;
    }
    .col-l-6-2 {
        grid-column: 6 / span 2;
    }
    .col-l-6-3 {
        grid-column: 6 / span 3;
    }
    .col-l-6-4 {
        grid-column: 6 / span 4;
    }
    .col-l-6-5 {
        grid-column: 6 / span 5;
    }
    .col-l-6-6 {
        grid-column: 6 / span 6;
    }
    .col-l-6-7 {
        grid-column: 6 / span 7;
    }
    .col-l-7-2 {
        grid-column: 7 / span 2;
    }
    .col-l-7-3 {
        grid-column: 7 / span 3;
    }
    .col-l-7-4 {
        grid-column: 7 / span 4;
    }
    .col-l-7-5 {
        grid-column: 7 / span 5;
    }
    .col-l-7-6 {
        grid-column: 7 / span 6;
    }
    .col-l-8-2 {
        grid-column: 8 / span 2;
    }
    .col-l-8-3 {
        grid-column: 8 / span 3;
    }
    .col-l-8-4 {
        grid-column: 8 / span 4;
    }
    .col-l-8-5 {
        grid-column: 8 / span 5;
    }
    .col-l-9-2 {
        grid-column: 9 / span 2;
    }
    .col-l-9-3 {
        grid-column: 9 / span 3;
    }
    .col-l-9-4 {
        grid-column: 9 / span 4;
    }
    .col-l-10-2 {
        grid-column: 10 / span 2;
    }
    .col-l-10-3 {
        grid-column: 10 / span 3;
    }
    .col-l-11-2 {
        grid-column: 11 / span 2;
    }


    /* REIHEN SPANNE - row-reihe-spanne */

    .row-l-1-2 {
        grid-row: 1 / span 2;
    }
    .row-l-1-3 {
        grid-row: 1 / span 3;
    }
    .row-l-1-4 {
        grid-row: 1 / span 4;
    }
    .row-l-1-5 {
        grid-row: 1 / span 5;
    }
    .row-l-1-6 {
        grid-row: 1 / span 6;
    }
    .row-l-1-7 {
        grid-row: 1 / span 7;
    }
    .row-l-1-8 {
        grid-row: 1 / span 8;
    }
    .row-l-1-9 {
        grid-row: 1 / span 9;
    }
    .row-l-1-10 {
        grid-row: 1 / span 10;
    }
    .row-l-1-11 {
        grid-row: 1 / span 11;
    }
    .row-l-1-12 {
        grid-row: 1 / span 12;
    }
    .row-l-2-2 {
        grid-row: 2 / span 2;
    }
    .row-l-2-3 {
        grid-row: 2 / span 3;
    }
    .row-l-2-4 {
        grid-row: 2 / span 4;
    }
    .row-l-2-5 {
        grid-row: 2 / span 5;
    }
    .row-l-2-6 {
        grid-row: 2 / span 6;
    }
    .row-l-2-7 {
        grid-row: 2 / span 7;
    }
    .row-l-2-8 {
        grid-row: 2 / span 8;
    }
    .row-l-2-9 {
        grid-row: 2 / span 9;
    }
    .row-l-2-10 {
        grid-row: 2 / span 10;
    }
    .row-l-2-11 {
        grid-row: 2 / span 11;
    }
    .row-l-3-2 {
        grid-row: 3 / span 2;
    }
    .row-l-3-3 {
        grid-row: 3 / span 3;
    }
    .row-l-3-4 {
        grid-row: 3 / span 4;
    }
    .row-l-3-5 {
        grid-row: 3 / span 5;
    }
    .row-l-3-6 {
        grid-row: 3 / span 6;
    }
    .row-l-3-7 {
        grid-row: 3 / span 7;
    }
    .row-l-3-8 {
        grid-row: 3 / span 8;
    }
    .row-l-3-9 {
        grid-row: 3 / span 9;
    }
    .row-l-3-10 {
        grid-row: 3 / span 10;
    }
    .row-l-4-2 {
        grid-row: 4 / span 2;
    }
    .row-l-4-3 {
        grid-row: 4 / span 3;
    }
    .row-l-4-4 {
        grid-row: 4 / span 5;
    }
    .row-l-4-5 {
        grid-row: 4 / span 5;
    }
    .row-l-4-6 {
        grid-row: 4 / span 6;
    }
    .row-l-4-7 {
        grid-row: 4 / span 7;
    }
    .row-l-4-8 {
        grid-row: 4 / span 8;
    }
    .row-l-4-9 {
        grid-row: 4 / span 9;
    }
    .row-l-5-2 {
        grid-row: 5 / span 2;
    }
    .row-l-5-3 {
        grid-row: 5 / span 3;
    }
    .row-l-5-4 {
        grid-row: 5 / span 4;
    }
    .row-l-5-5 {
        grid-row: 5 / span 5;
    }
    .row-l-5-6 {
        grid-row: 5 / span 6;
    }
    .row-l-5-7 {
        grid-row: 5 / span 7;
    }
    .row-l-5-8 {
        grid-row: 5 / span 7;
    }
    .row-l-6-2 {
        grid-row: 6 / span 2;
    }
    .row-l-6-3 {
        grid-row: 6 / span 3;
    }
    .row-l-6-4 {
        grid-row: 6 / span 4;
    }
    .row-l-6-5 {
        grid-row: 6 / span 5;
    }
    .row-l-6-6 {
        grid-row: 6 / span 6;
    }
    .row-l-6-7 {
        grid-row: 6 / span 7;
    }
    .row-l-7-2 {
        grid-row: 7 / span 2;
    }
    .row-l-7-3 {
        grid-row: 7 / span 3;
    }
    .row-l-7-4 {
        grid-row: 7 / span 4;
    }
    .row-l-7-5 {
        grid-row: 7 / span 5;
    }
    .row-l-7-6 {
        grid-row: 7 / span 6;
    }
    .row-l-8-2 {
        grid-row: 8 / span 2;
    }
    .row-l-8-3 {
        grid-row: 8 / span 3;
    }
    .row-l-8-4 {
        grid-row: 8 / span 4;
    }
    .row-l-8-5 {
        grid-row: 8 / span 5;
    }
    .row-l-9-2 {
        grid-row: 9 / span 2;
    }
    .row-l-9-3 {
        grid-row: 9 / span 3;
    }
    .row-l-9-4 {
        grid-row: 9 / span 4;
    }
    .row-l-10-2 {
        grid-row: 10 / span 2;
    }
    .row-l-10-3 {
        grid-row: 10 / span 3;
    }
    .row-l-11-2 {
        grid-row: 11 / span 2;
    }



}


/* MEDIUM M */

@media only screen and (max-width: 900px) {


        .grid.cols-m-1 {
            grid-template-columns: repeat(1, 1fr);
        }
      .grid.cols-m-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid.cols-m-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .grid.cols-lm-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .grid.cols-m-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      .grid.cols-m-6 {
        grid-template-columns: repeat(6, 1fr);
      }
      .grid.cols-m-7 {
        grid-template-columns: repeat(7, 1fr);
      }
      .grid.cols-m-8 {
        grid-template-columns: repeat(8, 1fr);
      }
      .grid.cols-m-9 {
        grid-template-columns: repeat(9, 1fr);
      }
      .grid.cols-m-10 {
        grid-template-columns: repeat(10, 1fr);
      }
      .grid.cols-m-11 {
        grid-template-columns: repeat(11, 1fr);
      }
      .grid.cols-m-12 {
        grid-template-columns: repeat(12, 1fr);
      }

    .grid.rows-m-1 {
        grid-template-rows: repeat(1, 1fr);
    }
    .grid.rows-m-2 {
        grid-template-rows: repeat(2, 1fr);
    }
    .grid.rows-m-3 {
        grid-template-rows: repeat(3, 1fr);
    }
    .grid.rows-m-4 {
        grid-template-rows: repeat(4, 1fr);
    }
    .grid.rows-m-5 {
        grid-template-rows: repeat(5, 1fr);
    }
    .grid.rows-m-6 {
        grid-template-rows: repeat(6, 1fr);
    }
    .grid.rows-m-7 {
        grid-template-rows: repeat(7, 1fr);
    }
    .grid.rows-m-8 {
        grid-template-rows: repeat(8, 1fr);
    }
    .grid.rows-m-9 {
        grid-template-rows: repeat(9, 1fr);
    }
    .grid.rows-m-10 {
        grid-template-rows: repeat(10, 1fr);
    }
    .grid.rows-m-11 {
        grid-template-rows: repeat(11, 1fr);
    }
    .grid.rows-m-12 {
        grid-template-rows: repeat(12, 1fr);
    }


/* Columns */

    .col-m-1 {
        grid-column: 1;
    }
    .col-m-2 {
        grid-column: 2;
    }
    .col-m-3 {
        grid-column: 3;
    }
    .col-m-4 {
        grid-column: 4;
    }
    .col-m-5 {
        grid-column: 5;
    }
    .col-m-6 {
        grid-column: 6;
    }
    .col-m-7 {
        grid-column: 7;
    }
    .col-m-8 {
        grid-column: 8;
    }
    .col-m-9 {
        grid-column: 9;
    }
    .col-m-10 {
        grid-column: 10;
    }
    .col-m-11 {
        grid-column: 11;
    }
    .col-m-12 {
        grid-column: 12;
    }


/* Rows */

    .row-m-1 {
        grid-row: 1;
    }
    .row-m-2 {
        grid-row: 2;
    }
    .row-m-3 {
        grid-row: 3;
    }
    .row-m-4 {
        grid-row: 4;
    }
    .row-m-5 {
        grid-row: 5;
    }
    .row-m-6 {
        grid-row: 6;
    }
    .row-m-7 {
        grid-row: 7;
    }
    .row-m-8 {
        grid-row: 8;
    }
    .row-m-9 {
        grid-row: 9;
    }
    .row-m-10 {
        grid-row: 10;
    }
    .row-m-11 {
        grid-row: 11;
    }
    .row-m-12 {
        grid-row: 12;
    }



    /* SPALTEN SPANNE - col-spalte-spanne */

    .col-m-1-2 {
        grid-column: 1 / span 2;
    }
    .col-m-1-3 {
        grid-column: 1 / span 3;
    }
    .col-m-1-4 {
        grid-column: 1 / span 4;
    }
    .col-m-1-5 {
        grid-column: 1 / span 5;
    }
    .col-m-1-6 {
        grid-column: 1 / span 6;
    }
    .col-m-1-7 {
        grid-column: 1 / span 7;
    }
    .col-m-1-8 {
        grid-column: 1 / span 8;
    }
    .col-m-1-9 {
        grid-column: 1 / span 9;
    }
    .col-m-1-10 {
        grid-column: 1 / span 10;
    }
    .col-m-1-11 {
        grid-column: 1 / span 11;
    }
    .col-m-1-12 {
        grid-column: 1 / span 12;
    }
    .col-m-2-2 {
        grid-column: 2 / span 2;
    }
    .col-m-2-3 {
        grid-column: 2 / span 3;
    }
    .col-m-2-4 {
        grid-column: 2 / span 4;
    }
    .col-m-2-5 {
        grid-column: 2 / span 5;
    }
    .col-m-2-6 {
        grid-column: 2 / span 6;
    }
    .col-m-2-7 {
        grid-column: 2 / span 7;
    }
    .col-m-2-8 {
        grid-column: 2 / span 8;
    }
    .col-m-2-9 {
        grid-column: 2 / span 9;
    }
    .col-m-2-10 {
        grid-column: 2 / span 10;
    }
    .col-m-2-11 {
        grid-column: 2 / span 11;
    }
    .col-m-3-2 {
        grid-column: 3 / span 2;
    }
    .col-m-3-3 {
        grid-column: 3 / span 3;
    }
    .col-m-3-4 {
        grid-column: 3 / span 4;
    }
    .col-m-3-5 {
        grid-column: 3 / span 5;
    }
    .col-m-3-6 {
        grid-column: 3 / span 6;
    }
    .col-m-3-7 {
        grid-column: 3 / span 7;
    }
    .col-m-3-8 {
        grid-column: 3 / span 8;
    }
    .col-m-3-9 {
        grid-column: 3 / span 9;
    }
    .col-m-3-10 {
        grid-column: 3 / span 10;
    }
    .col-m-4-2 {
        grid-column: 4 / span 2;
    }
    .col-m-4-3 {
        grid-column: 4 / span 3;
    }
    .col-m-4-4 {
        grid-column: 4 / span 5;
    }
    .col-m-4-5 {
        grid-column: 4 / span 5;
    }
    .col-m-4-6 {
        grid-column: 4 / span 6;
    }
    .col-m-4-7 {
        grid-column: 4 / span 7;
    }
    .col-m-4-8 {
        grid-column: 4 / span 8;
    }
    .col-m-4-9 {
        grid-column: 4 / span 9;
    }
    .col-m-5-2 {
        grid-column: 5 / span 2;
    }
    .col-m-5-3 {
        grid-column: 5 / span 3;
    }
    .col-m-5-4 {
        grid-column: 5 / span 4;
    }
    .col-m-5-5 {
        grid-column: 5 / span 5;
    }
    .col-m-5-6 {
        grid-column: 5 / span 6;
    }
    .col-m-5-7 {
        grid-column: 5 / span 7;
    }
    .col-m-5-8 {
        grid-column: 5 / span 8;
    }
    .col-m-6-2 {
        grid-column: 6 / span 2;
    }
    .col-m-6-3 {
        grid-column: 6 / span 3;
    }
    .col-m-6-4 {
        grid-column: 6 / span 4;
    }
    .col-m-6-5 {
        grid-column: 6 / span 5;
    }
    .col-m-6-6 {
        grid-column: 6 / span 6;
    }
    .col-m-6-7 {
        grid-column: 6 / span 7;
    }
    .col-m-7-2 {
        grid-column: 7 / span 2;
    }
    .col-m-7-3 {
        grid-column: 7 / span 3;
    }
    .col-m-7-4 {
        grid-column: 7 / span 4;
    }
    .col-m-7-5 {
        grid-column: 7 / span 5;
    }
    .col-m-7-6 {
        grid-column: 7 / span 6;
    }
    .col-m-8-2 {
        grid-column: 8 / span 2;
    }
    .col-m-8-3 {
        grid-column: 8 / span 3;
    }
    .col-m-8-4 {
        grid-column: 8 / span 4;
    }
    .col-m-8-5 {
        grid-column: 8 / span 5;
    }
    .col-m-9-2 {
        grid-column: 9 / span 2;
    }
    .col-m-9-3 {
        grid-column: 9 / span 3;
    }
    .col-m-9-4 {
        grid-column: 9 / span 4;
    }
    .col-m-10-2 {
        grid-column: 10 / span 2;
    }
    .col-m-10-3 {
        grid-column: 10 / span 3;
    }
    .col-m-11-2 {
        grid-column: 11 / span 2;
    }


/* REIHEN SPANNE - row-reihe-spanne */

    .row-m-1-2 {
        grid-row: 1 / span 2;
    }
    .row-m-1-3 {
        grid-row: 1 / span 3;
    }
    .row-m-1-4 {
        grid-row: 1 / span 4;
    }
    .row-m-1-5 {
        grid-row: 1 / span 5;
    }
    .row-m-1-6 {
        grid-row: 1 / span 6;
    }
    .row-m-1-7 {
        grid-row: 1 / span 7;
    }
    .row-m-1-8 {
        grid-row: 1 / span 8;
    }
    .row-m-1-9 {
        grid-row: 1 / span 9;
    }
    .row-m-1-10 {
        grid-row: 1 / span 10;
    }
    .row-m-1-11 {
        grid-row: 1 / span 11;
    }
    .row-m-1-12 {
        grid-row: 1 / span 12;
    }
    .row-m-2-2 {
        grid-row: 2 / span 2;
    }
    .row-m-2-3 {
        grid-row: 2 / span 3;
    }
    .row-m-2-4 {
        grid-row: 2 / span 4;
    }
    .row-m-2-5 {
        grid-row: 2 / span 5;
    }
    .row-m-2-6 {
        grid-row: 2 / span 6;
    }
    .row-m-2-7 {
        grid-row: 2 / span 7;
    }
    .row-m-2-8 {
        grid-row: 2 / span 8;
    }
    .row-m-2-9 {
        grid-row: 2 / span 9;
    }
    .row-m-2-10 {
        grid-row: 2 / span 10;
    }
    .row-m-2-11 {
        grid-row: 2 / span 11;
    }
    .row-m-3-2 {
        grid-row: 3 / span 2;
    }
    .row-m-3-3 {
        grid-row: 3 / span 3;
    }
    .row-m-3-4 {
        grid-row: 3 / span 4;
    }
    .row-m-3-5 {
        grid-row: 3 / span 5;
    }
    .row-m-3-6 {
        grid-row: 3 / span 6;
    }
    .row-m-3-7 {
        grid-row: 3 / span 7;
    }
    .row-m-3-8 {
        grid-row: 3 / span 8;
    }
    .row-m-3-9 {
        grid-row: 3 / span 9;
    }
    .row-m-3-10 {
        grid-row: 3 / span 10;
    }
    .row-m-4-2 {
        grid-row: 4 / span 2;
    }
    .row-m-4-3 {
        grid-row: 4 / span 3;
    }
    .row-m-4-4 {
        grid-row: 4 / span 5;
    }
    .row-m-4-5 {
        grid-row: 4 / span 5;
    }
    .row-m-4-6 {
        grid-row: 4 / span 6;
    }
    .row-m-4-7 {
        grid-row: 4 / span 7;
    }
    .row-m-4-8 {
        grid-row: 4 / span 8;
    }
    .row-m-4-9 {
        grid-row: 4 / span 9;
    }
    .row-m-5-2 {
        grid-row: 5 / span 2;
    }
    .row-m-5-3 {
        grid-row: 5 / span 3;
    }
    .row-m-5-4 {
        grid-row: 5 / span 4;
    }
    .row-m-5-5 {
        grid-row: 5 / span 5;
    }
    .row-m-5-6 {
        grid-row: 5 / span 6;
    }
    .row-m-5-7 {
        grid-row: 5 / span 7;
    }
    .row-m-5-8 {
        grid-row: 5 / span 8;
    }
    .row-m-6-2 {
        grid-row: 6 / span 2;
    }
    .row-m-6-3 {
        grid-row: 6 / span 3;
    }
    .row-m-6-4 {
        grid-row: 6 / span 4;
    }
    .row-m-6-5 {
        grid-row: 6 / span 5;
    }
    .row-m-6-6 {
        grid-row: 6 / span 6;
    }
    .row-m-6-7 {
        grid-row: 6 / span 7;
    }
    .row-m-7-2 {
        grid-row: 7 / span 2;
    }
    .row-m-7-3 {
        grid-row: 7 / span 3;
    }
    .row-m-7-4 {
        grid-row: 7 / span 4;
    }
    .row-m-7-5 {
        grid-row: 7 / span 5;
    }
    .row-m-7-6 {
        grid-row: 7 / span 6;
    }
    .row-m-8-2 {
        grid-row: 8 / span 2;
    }
    .row-m-8-3 {
        grid-row: 8 / span 3;
    }
    .row-m-8-4 {
        grid-row: 8 / span 4;
    }
    .row-m-8-5 {
        grid-row: 8 / span 5;
    }
    .row-m-9-2 {
        grid-row: 9 / span 2;
    }
    .row-m-9-3 {
        grid-row: 9 / span 3;
    }
    .row-m-9-4 {
        grid-row: 9 / span 4;
    }
    .row-m-10-2 {
        grid-row: 10 / span 2;
    }
    .row-m-10-3 {
        grid-row: 10 / span 3;
    }
    .row-m-11-2 {
        grid-row: 11 / span 2;
    }



}



/* SMALL S */

@media only screen and (max-width: 700px) {


    .grid.cols-s-1 {
        grid-template-columns: repeat(1, 1fr);
      }
      .grid.cols-s-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid.cols-s-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .grid.cols-s-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .grid.cols-s-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      .grid.cols-s-6 {
        grid-template-columns: repeat(6, 1fr);
      }
      .grid.cols-s-7 {
        grid-template-columns: repeat(7, 1fr);
      }
      .grid.cols-s-8 {
        grid-template-columns: repeat(8, 1fr);
      }
      .grid.cols-s-9 {
        grid-template-columns: repeat(9, 1fr);
      }
      .grid.cols-s-10 {
        grid-template-columns: repeat(10, 1fr);
      }
      .grid.cols-s-11 {
        grid-template-columns: repeat(11, 1fr);
      }
      .grid.cols-s-12 {
        grid-template-columns: repeat(12, 1fr);
      }

      .grid.rows-s-1 {
        grid-template-rows: repeat(1, 1fr);
      }
      .grid.rows-s-2 {
        grid-template-rows: repeat(2, 1fr);
      }
      .grid.rows-s-3 {
        grid-template-rows: repeat(3, 1fr);
      }
      .grid.rows-s-4 {
        grid-template-rows: repeat(4, 1fr);
      }
      .grid.rows-s-5 {
        grid-template-rows: repeat(5, 1fr);
      }
      .grid.rows-s-6 {
        grid-template-rows: repeat(6, 1fr);
      }
      .grid.rows-s-7 {
        grid-template-rows: repeat(7, 1fr);
      }
      .grid.rows-s-8 {
        grid-template-rows: repeat(8, 1fr);
      }
      .grid.rows-s-9 {
        grid-template-rows: repeat(9, 1fr);
      }
      .grid.rows-s-10 {
        grid-template-rows: repeat(10, 1fr);
      }
      .grid.rows-s-11 {
        grid-template-rows: repeat(11, 1fr);
      }
      .grid.rows-s-12 {
        grid-template-rows: repeat(12, 1fr);
      }


/* Columns */

    .col-s-1 {
        grid-column: 1;
    }
    .col-s-2 {
        grid-column: 2;
    }
    .col-s-3 {
        grid-column: 3;
    }
    .col-s-4 {
        grid-column: 4;
    }
    .col-s-5 {
        grid-column: 5;
    }
    .col-s-6 {
        grid-column: 6;
    }
    .col-s-7 {
        grid-column: 7;
    }
    .col-s-8 {
        grid-column: 8;
    }
    .col-s-9 {
        grid-column: 9;
    }
    .col-s-10 {
        grid-column: 10;
    }
    .col-s-11 {
        grid-column: 11;
    }
    .col-s-12 {
        grid-column: 12;
    }


/* Rows */

    .row-s-1 {
        grid-row: 1;
    }
    .row-s-2 {
        grid-row: 2;
    }
    .row-s-3 {
        grid-row: 3;
    }
    .row-s-4 {
        grid-row: 4;
    }
    .row-s-5 {
        grid-row: 5;
    }
    .row-s-6 {
        grid-row: 6;
    }
    .row-s-7 {
        grid-row: 7;
    }
    .row-s-8 {
        grid-row: 8;
    }
    .row-s-9 {
        grid-row: 9;
    }
    .row-s-10 {
        grid-row: 10;
    }
    .row-s-11 {
        grid-row: 11;
    }
    .row-s-12 {
        grid-row: 12;
    }


    /* SPALTEN SPANNE - col-spalte-spanne */

    .col-s-1-2 {
        grid-column: 1 / span 2;
    }
    .col-s-1-3 {
        grid-column: 1 / span 3;
    }
    .col-s-1-4 {
        grid-column: 1 / span 4;
    }
    .col-s-1-5 {
        grid-column: 1 / span 5;
    }
    .col-s-1-6 {
        grid-column: 1 / span 6;
    }
    .col-s-1-7 {
        grid-column: 1 / span 7;
    }
    .col-s-1-8 {
        grid-column: 1 / span 8;
    }
    .col-s-1-9 {
        grid-column: 1 / span 9;
    }
    .col-s-1-10 {
        grid-column: 1 / span 10;
    }
    .col-s-1-11 {
        grid-column: 1 / span 11;
    }
    .col-s-1-12 {
        grid-column: 1 / span 12;
    }
    .col-s-2-2 {
        grid-column: 2 / span 2;
    }
    .col-s-2-3 {
        grid-column: 2 / span 3;
    }
    .col-s-2-4 {
        grid-column: 2 / span 4;
    }
    .col-s-2-5 {
        grid-column: 2 / span 5;
    }
    .col-s-2-6 {
        grid-column: 2 / span 6;
    }
    .col-s-2-7 {
        grid-column: 2 / span 7;
    }
    .col-s-2-8 {
        grid-column: 2 / span 8;
    }
    .col-s-2-9 {
        grid-column: 2 / span 9;
    }
    .col-s-2-10 {
        grid-column: 2 / span 10;
    }
    .col-s-2-11 {
        grid-column: 2 / span 11;
    }
    .col-s-3-2 {
        grid-column: 3 / span 2;
    }
    .col-s-3-3 {
        grid-column: 3 / span 3;
    }
    .col-s-3-4 {
        grid-column: 3 / span 4;
    }
    .col-s-3-5 {
        grid-column: 3 / span 5;
    }
    .col-s-3-6 {
        grid-column: 3 / span 6;
    }
    .col-s-3-7 {
        grid-column: 3 / span 7;
    }
    .col-s-3-8 {
        grid-column: 3 / span 8;
    }
    .col-s-3-9 {
        grid-column: 3 / span 9;
    }
    .col-s-3-10 {
        grid-column: 3 / span 10;
    }
    .col-s-4-2 {
        grid-column: 4 / span 2;
    }
    .col-s-4-3 {
        grid-column: 4 / span 3;
    }
    .col-s-4-4 {
        grid-column: 4 / span 5;
    }
    .col-s-4-5 {
        grid-column: 4 / span 5;
    }
    .col-s-4-6 {
        grid-column: 4 / span 6;
    }
    .col-s-4-7 {
        grid-column: 4 / span 7;
    }
    .col-s-4-8 {
        grid-column: 4 / span 8;
    }
    .col-s-4-9 {
        grid-column: 4 / span 9;
    }
    .col-s-5-2 {
        grid-column: 5 / span 2;
    }
    .col-s-5-3 {
        grid-column: 5 / span 3;
    }
    .col-s-5-4 {
        grid-column: 5 / span 4;
    }
    .col-s-5-5 {
        grid-column: 5 / span 5;
    }
    .col-s-5-6 {
        grid-column: 5 / span 6;
    }
    .col-s-5-7 {
        grid-column: 5 / span 7;
    }
    .col-s-5-8 {
        grid-column: 5 / span 8;
    }
    .col-s-6-2 {
        grid-column: 6 / span 2;
    }
    .col-s-6-3 {
        grid-column: 6 / span 3;
    }
    .col-s-6-4 {
        grid-column: 6 / span 4;
    }
    .col-s-6-5 {
        grid-column: 6 / span 5;
    }
    .col-s-6-6 {
        grid-column: 6 / span 6;
    }
    .col-s-6-7 {
        grid-column: 6 / span 7;
    }
    .col-s-7-2 {
        grid-column: 7 / span 2;
    }
    .col-s-7-3 {
        grid-column: 7 / span 3;
    }
    .col-s-7-4 {
        grid-column: 7 / span 4;
    }
    .col-s-7-5 {
        grid-column: 7 / span 5;
    }
    .col-s-7-6 {
        grid-column: 7 / span 6;
    }
    .col-s-8-2 {
        grid-column: 8 / span 2;
    }
    .col-s-8-3 {
        grid-column: 8 / span 3;
    }
    .col-s-8-4 {
        grid-column: 8 / span 4;
    }
    .col-s-8-5 {
        grid-column: 8 / span 5;
    }
    .col-s-9-2 {
        grid-column: 9 / span 2;
    }
    .col-s-9-3 {
        grid-column: 9 / span 3;
    }
    .col-s-9-4 {
        grid-column: 9 / span 4;
    }
    .col-s-10-2 {
        grid-column: 10 / span 2;
    }
    .col-s-10-3 {
        grid-column: 10 / span 3;
    }
    .col-s-11-2 {
        grid-column: 11 / span 2;
    }


/* REIHEN SPANNE - row-reihe-spanne */

    .row-s-1-2 {
        grid-row: 1 / span 2;
    }
    .row-s-1-3 {
        grid-row: 1 / span 3;
    }
    .row-s-1-4 {
        grid-row: 1 / span 4;
    }
    .row-s-1-5 {
        grid-row: 1 / span 5;
    }
    .row-s-1-6 {
        grid-row: 1 / span 6;
    }
    .row-s-1-7 {
        grid-row: 1 / span 7;
    }
    .row-s-1-8 {
        grid-row: 1 / span 8;
    }
    .row-s-1-9 {
        grid-row: 1 / span 9;
    }
    .row-s-1-10 {
        grid-row: 1 / span 10;
    }
    .row-s-1-11 {
        grid-row: 1 / span 11;
    }
    .row-s-1-12 {
        grid-row: 1 / span 12;
    }
    .row-s-2-2 {
        grid-row: 2 / span 2;
    }
    .row-s-2-3 {
        grid-row: 2 / span 3;
    }
    .row-s-2-4 {
        grid-row: 2 / span 4;
    }
    .row-s-2-5 {
        grid-row: 2 / span 5;
    }
    .row-s-2-6 {
        grid-row: 2 / span 6;
    }
    .row-s-2-7 {
        grid-row: 2 / span 7;
    }
    .row-s-2-8 {
        grid-row: 2 / span 8;
    }
    .row-s-2-9 {
        grid-row: 2 / span 9;
    }
    .row-s-2-10 {
        grid-row: 2 / span 10;
    }
    .row-s-2-11 {
        grid-row: 2 / span 11;
    }
    .row-s-3-2 {
        grid-row: 3 / span 2;
    }
    .row-s-3-3 {
        grid-row: 3 / span 3;
    }
    .row-s-3-4 {
        grid-row: 3 / span 4;
    }
    .row-s-3-5 {
        grid-row: 3 / span 5;
    }
    .row-s-3-6 {
        grid-row: 3 / span 6;
    }
    .row-s-3-7 {
        grid-row: 3 / span 7;
    }
    .row-s-3-8 {
        grid-row: 3 / span 8;
    }
    .row-s-3-9 {
        grid-row: 3 / span 9;
    }
    .row-s-3-10 {
        grid-row: 3 / span 10;
    }
    .row-s-4-2 {
        grid-row: 4 / span 2;
    }
    .row-s-4-3 {
        grid-row: 4 / span 3;
    }
    .row-s-4-4 {
        grid-row: 4 / span 5;
    }
    .row-s-4-5 {
        grid-row: 4 / span 5;
    }
    .row-s-4-6 {
        grid-row: 4 / span 6;
    }
    .row-s-4-7 {
        grid-row: 4 / span 7;
    }
    .row-s-4-8 {
        grid-row: 4 / span 8;
    }
    .row-s-4-9 {
        grid-row: 4 / span 9;
    }
    .row-s-5-2 {
        grid-row: 5 / span 2;
    }
    .row-s-5-3 {
        grid-row: 5 / span 3;
    }
    .row-s-5-4 {
        grid-row: 5 / span 4;
    }
    .row-s-5-5 {
        grid-row: 5 / span 5;
    }
    .row-s-5-6 {
        grid-row: 5 / span 6;
    }
    .row-s-5-7 {
        grid-row: 5 / span 7;
    }
    .row-s-5-8 {
        grid-row: 5 / span 8;
    }
    .row-s-6-2 {
        grid-row: 6 / span 2;
    }
    .row-s-6-3 {
        grid-row: 6 / span 3;
    }
    .row-s-6-4 {
        grid-row: 6 / span 4;
    }
    .row-s-6-5 {
        grid-row: 6 / span 5;
    }
    .row-s-6-6 {
        grid-row: 6 / span 6;
    }
    .row-s-6-7 {
        grid-row: 6 / span 7;
    }
    .row-s-7-2 {
        grid-row: 7 / span 2;
    }
    .row-s-7-3 {
        grid-row: 7 / span 3;
    }
    .row-s-7-4 {
        grid-row: 7 / span 4;
    }
    .row-s-7-5 {
        grid-row: 7 / span 5;
    }
    .row-s-7-6 {
        grid-row: 7 / span 6;
    }
    .row-s-8-2 {
        grid-row: 8 / span 2;
    }
    .row-s-8-3 {
        grid-row: 8 / span 3;
    }
    .row-s-8-4 {
        grid-row: 8 / span 4;
    }
    .row-s-8-5 {
        grid-row: 8 / span 5;
    }
    .row-s-9-2 {
        grid-row: 9 / span 2;
    }
    .row-s-9-3 {
        grid-row: 9 / span 3;
    }
    .row-s-9-4 {
        grid-row: 9 / span 4;
    }
    .row-s-10-2 {
        grid-row: 10 / span 2;
    }
    .row-s-10-3 {
        grid-row: 10 / span 3;
    }
    .row-s-11-2 {
        grid-row: 11 / span 2;
    }
    
} 


/* EXTRA SMALL XS */

@media only screen and (max-width: 450px) {  

    .grid.cols-xs-1 {
        grid-template-columns: repeat(1, 1fr);
      }
      .grid.cols-xs-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid.cols-xs-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .grid.cols-xs-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .grid.cols-xs-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      .grid.cols-xs-6 {
        grid-template-columns: repeat(6, 1fr);
      }
      .grid.cols-xs-7 {
        grid-template-columns: repeat(7, 1fr);
      }
      .grid.cols-xs-8 {
        grid-template-columns: repeat(8, 1fr);
      }
      .grid.cols-xs-9 {
        grid-template-columns: repeat(9, 1fr);
      }
      .grid.cols-xs-10 {
        grid-template-columns: repeat(10, 1fr);
      }
      .grid.cols-xs-11 {
        grid-template-columns: repeat(11, 1fr);
      }
      .grid.cols-xs-12 {
        grid-template-columns: repeat(12, 1fr);
      }

      .grid.rows-xs-1 {
        grid-template-rows: repeat(1, 1fr);
      }
      .grid.rows-xs-2 {
        grid-template-rows: repeat(2, 1fr);
      }
      .grid.rows-xs-3 {
        grid-template-rows: repeat(3, 1fr);
      }
      .grid.rows-xs-4 {
        grid-template-rows: repeat(4, 1fr);
      }
      .grid.rows-xs-5 {
        grid-template-rows: repeat(5, 1fr);
      }
      .grid.rows-xs-6 {
        grid-template-rows: repeat(6, 1fr);
      }
      .grid.rows-xs-7 {
        grid-template-rows: repeat(7, 1fr);
      }
      .grid.rows-xs-8 {
        grid-template-rows: repeat(8, 1fr);
      }
      .grid.rows-xs-9 {
        grid-template-rows: repeat(9, 1fr);
      }
      .grid.rows-xs-10 {
        grid-template-rows: repeat(10, 1fr);
      }
      .grid.rows-xs-11 {
        grid-template-rows: repeat(11, 1fr);
      }
      .grid.rows-xs-12 {
        grid-template-rows: repeat(12, 1fr);
      }

      

/* Columns */

    .col-xs-1 {
        grid-column: 1;
    }
    .col-xs-2 {
        grid-column: 2;
    }
    .col-xs-3 {
        grid-column: 3;
    }
    .col-xs-4 {
        grid-column: 4;
    }
    .col-xs-5 {
        grid-column: 5;
    }
    .col-xs-6 {
        grid-column: 6;
    }
    .col-xs-7 {
        grid-column: 7;
    }
    .col-xs-8 {
        grid-column: 8;
    }
    .col-xs-9 {
        grid-column: 9;
    }
    .col-xs-10 {
        grid-column: 10;
    }
    .col-xs-11 {
        grid-column: 11;
    }
    .col-xs-12 {
        grid-column: 12;
    }


/* Rows */

    .row-xs-1 {
        grid-row: 1;
    }
    .row-xs-2 {
        grid-row: 2;
    }
    .row-xs-3 {
        grid-row: 3;
    }
    .row-xs-4 {
        grid-row: 4;
    }
    .row-xs-5 {
        grid-row: 5;
    }
    .row-xs-6 {
        grid-row: 6;
    }
    .row-xs-7 {
        grid-row: 7;
    }
    .row-xs-8 {
        grid-row: 8;
    }
    .row-xs-9 {
        grid-row: 9;
    }
    .row-xs-10 {
        grid-row: 10;
    }
    .row-xs-11 {
        grid-row: 11;
    }
    .row-xs-12 {
        grid-row: 12;
    }


    /* SPALTEN SPANNE - col-spalte-spanne */

    .col-xs-1-2 {
        grid-column: 1 / span 2;
    }
    .col-xs-1-3 {
        grid-column: 1 / span 3;
    }
    .col-xs-1-4 {
        grid-column: 1 / span 4;
    }
    .col-xs-1-5 {
        grid-column: 1 / span 5;
    }
    .col-xs-1-6 {
        grid-column: 1 / span 6;
    }
    .col-xs-1-7 {
        grid-column: 1 / span 7;
    }
    .col-xs-1-8 {
        grid-column: 1 / span 8;
    }
    .col-xs-1-9 {
        grid-column: 1 / span 9;
    }
    .col-xs-1-10 {
        grid-column: 1 / span 10;
    }
    .col-xs-1-11 {
        grid-column: 1 / span 11;
    }
    .col-xs-1-12 {
        grid-column: 1 / span 12;
    }
    .col-xs-2-2 {
        grid-column: 2 / span 2;
    }
    .col-xs-2-3 {
        grid-column: 2 / span 3;
    }
    .col-xs-2-4 {
        grid-column: 2 / span 4;
    }
    .col-xs-2-5 {
        grid-column: 2 / span 5;
    }
    .col-xs-2-6 {
        grid-column: 2 / span 6;
    }
    .col-xs-2-7 {
        grid-column: 2 / span 7;
    }
    .col-xs-2-8 {
        grid-column: 2 / span 8;
    }
    .col-xs-2-9 {
        grid-column: 2 / span 9;
    }
    .col-xs-2-10 {
        grid-column: 2 / span 10;
    }
    .col-xs-2-11 {
        grid-column: 2 / span 11;
    }
    .col-xs-3-2 {
        grid-column: 3 / span 2;
    }
    .col-xs-3-3 {
        grid-column: 3 / span 3;
    }
    .col-xs-3-4 {
        grid-column: 3 / span 4;
    }
    .col-xs-3-5 {
        grid-column: 3 / span 5;
    }
    .col-xs-3-6 {
        grid-column: 3 / span 6;
    }
    .col-xs-3-7 {
        grid-column: 3 / span 7;
    }
    .col-xs-3-8 {
        grid-column: 3 / span 8;
    }
    .col-xs-3-9 {
        grid-column: 3 / span 9;
    }
    .col-xs-3-10 {
        grid-column: 3 / span 10;
    }
    .col-xs-4-2 {
        grid-column: 4 / span 2;
    }
    .col-xs-4-3 {
        grid-column: 4 / span 3;
    }
    .col-xs-4-4 {
        grid-column: 4 / span 5;
    }
    .col-xs-4-5 {
        grid-column: 4 / span 5;
    }
    .col-xs-4-6 {
        grid-column: 4 / span 6;
    }
    .col-xs-4-7 {
        grid-column: 4 / span 7;
    }
    .col-xs-4-8 {
        grid-column: 4 / span 8;
    }
    .col-xs-4-9 {
        grid-column: 4 / span 9;
    }
    .col-xs-5-2 {
        grid-column: 5 / span 2;
    }
    .col-xs-5-3 {
        grid-column: 5 / span 3;
    }
    .col-xs-5-4 {
        grid-column: 5 / span 4;
    }
    .col-xs-5-5 {
        grid-column: 5 / span 5;
    }
    .col-xs-5-6 {
        grid-column: 5 / span 6;
    }
    .col-xs-5-7 {
        grid-column: 5 / span 7;
    }
    .col-xs-5-8 {
        grid-column: 5 / span 8;
    }
    .col-xs-6-2 {
        grid-column: 6 / span 2;
    }
    .col-xs-6-3 {
        grid-column: 6 / span 3;
    }
    .col-xs-6-4 {
        grid-column: 6 / span 4;
    }
    .col-xs-6-5 {
        grid-column: 6 / span 5;
    }
    .col-xs-6-6 {
        grid-column: 6 / span 6;
    }
    .col-xs-6-7 {
        grid-column: 6 / span 7;
    }
    .col-xs-7-2 {
        grid-column: 7 / span 2;
    }
    .col-xs-7-3 {
        grid-column: 7 / span 3;
    }
    .col-xs-7-4 {
        grid-column: 7 / span 4;
    }
    .col-xs-7-5 {
        grid-column: 7 / span 5;
    }
    .col-xs-7-6 {
        grid-column: 7 / span 6;
    }
    .col-xs-8-2 {
        grid-column: 8 / span 2;
    }
    .col-xs-8-3 {
        grid-column: 8 / span 3;
    }
    .col-xs-8-4 {
        grid-column: 8 / span 4;
    }
    .col-xs-8-5 {
        grid-column: 8 / span 5;
    }
    .col-xs-9-2 {
        grid-column: 9 / span 2;
    }
    .col-xs-9-3 {
        grid-column: 9 / span 3;
    }
    .col-xs-9-4 {
        grid-column: 9 / span 4;
    }
    .col-xs-10-2 {
        grid-column: 10 / span 2;
    }
    .col-xs-10-3 {
        grid-column: 10 / span 3;
    }
    .col-xs-11-2 {
        grid-column: 11 / span 2;
    }


/* REIHEN SPANNE - row-reihe-spanne */

    .row-xs-1-2 {
        grid-row: 1 / span 2;
    }
    .row-xs-1-3 {
        grid-row: 1 / span 3;
    }
    .row-xs-1-4 {
        grid-row: 1 / span 4;
    }
    .row-xs-1-5 {
        grid-row: 1 / span 5;
    }
    .row-xs-1-6 {
        grid-row: 1 / span 6;
    }
    .row-xs-1-7 {
        grid-row: 1 / span 7;
    }
    .row-xs-1-8 {
        grid-row: 1 / span 8;
    }
    .row-xs-1-9 {
        grid-row: 1 / span 9;
    }
    .row-xs-1-10 {
        grid-row: 1 / span 10;
    }
    .row-xs-1-11 {
        grid-row: 1 / span 11;
    }
    .row-xs-1-12 {
        grid-row: 1 / span 12;
    }
    .row-xs-2-2 {
        grid-row: 2 / span 2;
    }
    .row-xs-2-3 {
        grid-row: 2 / span 3;
    }
    .row-xs-2-4 {
        grid-row: 2 / span 4;
    }
    .row-xs-2-5 {
        grid-row: 2 / span 5;
    }
    .row-xs-2-6 {
        grid-row: 2 / span 6;
    }
    .row-xs-2-7 {
        grid-row: 2 / span 7;
    }
    .row-xs-2-8 {
        grid-row: 2 / span 8;
    }
    .row-xs-2-9 {
        grid-row: 2 / span 9;
    }
    .row-xs-2-10 {
        grid-row: 2 / span 10;
    }
    .row-xs-2-11 {
        grid-row: 2 / span 11;
    }
    .row-xs-3-2 {
        grid-row: 3 / span 2;
    }
    .row-xs-3-3 {
        grid-row: 3 / span 3;
    }
    .row-xs-3-4 {
        grid-row: 3 / span 4;
    }
    .row-xs-3-5 {
        grid-row: 3 / span 5;
    }
    .row-xs-3-6 {
        grid-row: 3 / span 6;
    }
    .row-xs-3-7 {
        grid-row: 3 / span 7;
    }
    .row-xs-3-8 {
        grid-row: 3 / span 8;
    }
    .row-xs-3-9 {
        grid-row: 3 / span 9;
    }
    .row-xs-3-10 {
        grid-row: 3 / span 10;
    }
    .row-xs-4-2 {
        grid-row: 4 / span 2;
    }
    .row-xs-4-3 {
        grid-row: 4 / span 3;
    }
    .row-xs-4-4 {
        grid-row: 4 / span 5;
    }
    .row-xs-4-5 {
        grid-row: 4 / span 5;
    }
    .row-xs-4-6 {
        grid-row: 4 / span 6;
    }
    .row-xs-4-7 {
        grid-row: 4 / span 7;
    }
    .row-xs-4-8 {
        grid-row: 4 / span 8;
    }
    .row-xs-4-9 {
        grid-row: 4 / span 9;
    }
    .row-xs-5-2 {
        grid-row: 5 / span 2;
    }
    .row-xs-5-3 {
        grid-row: 5 / span 3;
    }
    .row-xs-5-4 {
        grid-row: 5 / span 4;
    }
    .row-xs-5-5 {
        grid-row: 5 / span 5;
    }
    .row-xs-5-6 {
        grid-row: 5 / span 6;
    }
    .row-xs-5-7 {
        grid-row: 5 / span 7;
    }
    .row-xs-5-8 {
        grid-row: 5 / span 8;
    }
    .row-xs-6-2 {
        grid-row: 6 / span 2;
    }
    .row-xs-6-3 {
        grid-row: 6 / span 3;
    }
    .row-xs-6-4 {
        grid-row: 6 / span 4;
    }
    .row-xs-6-5 {
        grid-row: 6 / span 5;
    }
    .row-xs-6-6 {
        grid-row: 6 / span 6;
    }
    .row-xs-6-7 {
        grid-row: 6 / span 7;
    }
    .row-xs-7-2 {
        grid-row: 7 / span 2;
    }
    .row-xs-7-3 {
        grid-row: 7 / span 3;
    }
    .row-xs-7-4 {
        grid-row: 7 / span 4;
    }
    .row-xs-7-5 {
        grid-row: 7 / span 5;
    }
    .row-xs-7-6 {
        grid-row: 7 / span 6;
    }
    .row-xs-8-2 {
        grid-row: 8 / span 2;
    }
    .row-xs-8-3 {
        grid-row: 8 / span 3;
    }
    .row-xs-8-4 {
        grid-row: 8 / span 4;
    }
    .row-xs-8-5 {
        grid-row: 8 / span 5;
    }
    .row-xs-9-2 {
        grid-row: 9 / span 2;
    }
    .row-xs-9-3 {
        grid-row: 9 / span 3;
    }
    .row-xs-9-4 {
        grid-row: 9 / span 4;
    }
    .row-xs-10-2 {
        grid-row: 10 / span 2;
    }
    .row-xs-10-3 {
        grid-row: 10 / span 3;
    }
    .row-xs-11-2 {
        grid-row: 11 / span 2;
    }

    

}








/*------------------------------------------------------------------------------------------------------------------------------
                                                        3 GAPS
------------------------------------------------------------------------------------------------------------------------------*/
  
.row-gap-1 {
    row-gap: clamp(0.4em, 1vw, 1em);
}
.row-gap-2 {
    row-gap: clamp(0.8em, 2vw, 2em);
}
.row-gap-3 {
    row-gap: clamp(1.4em, 3vw, 3em);
}
.row-gap-4 {
    row-gap: clamp(1.8em, 4vw, 4em);
}
.row-gap-5 {
    row-gap: clamp(2.2em, 5vw, 5em);
}
.row-gap-6 {
    row-gap: clamp(2.6em, 6vw, 6em);
}
.row-gap-7 {
    row-gap: clamp(3em, 7vw, 7em);
}
.row-gap-8 {
    row-gap: clamp(3.4em, 8vw, 8em);
}
.row-gap-9 {
    row-gap: clamp(3.8em, 9vw, 9em);
}
.row-gap-10 {
    row-gap: clamp(4.2em, 10vw, 10em);
}  
.row-gap-11 {
    row-gap: clamp(4.6em, 11vw, 11em);
}
.row-gap-12 {
    row-gap: clamp(5em, 12vw, 12em);
}
.row-gap-13 {
    row-gap: clamp(5.4em, 13vw, 13em);
}
.row-gap-14 {
    row-gap: clamp(5.8em, 14vw, 14em);
}
.row-gap-15 {
    row-gap: clamp(6.2em, 15vw, 15em);
}
.row-gap-16 {
    row-gap: clamp(6.6em, 16vw, 16em);
}
.row-gap-17 {
    row-gap: clamp(7em, 17vw, 17em);
}
.row-gap-18 {
    row-gap: clamp(7.4em, 18vw, 18em);
}
.row-gap-19 {
    row-gap: clamp(7.8em, 19vw, 19em);
}
.row-gap-20 {
    row-gap: clamp(8.2em, 20vw, 20em);
}

.column-gap-1 {
    column-gap: clamp(0.4vw, 1vw, 1em);
}
.column-gap-2 {
    column-gap: clamp(0.8vw, 2vw, 2em);
}
.column-gap-3 {
    column-gap: clamp(1.2vw, 3vw, 3em);
}
.column-gap-4 {
    column-gap: clamp(1.6vw, 4vw, 4em);
}
.column-gap-5 {
    column-gap: clamp(2vw, 5vw, 5em);
}
.column-gap-6 {
    column-gap: clamp(2.4vw, 6vw, 6em);
}
.column-gap-7 {
    column-gap: clamp(2.8vw, 7vw, 7em);
}
.column-gap-8 {
    column-gap: clamp(3.2vw, 8vw, 8em);
}
.column-gap-9 {
    column-gap: clamp(3.6vw, 9vw, 9em);
}
.column-gap-10 {
    column-gap: clamp(4vw, 10vw, 10em);
}



/* /////////// BREAKPOINTS ///////////

1100px = L
900px = M
700px = S
450px = XS

/////////// */



/* ===================================== GAPS RESPONSIVE ===================================== */

/* LARGE L */

@media only screen and (max-width: 1100px) {

    .row-gap-l-1 {
        row-gap: clamp(0.4em, 1vw, 1em);
    }
    .row-gap-l-2 {
        row-gap: clamp(0.8em, 2vw, 2em);
    }
    .row-gap-l-3 {
        row-gap: clamp(1.4em, 3vw, 3em);
    }
    .row-gap-l-4 {
        row-gap: clamp(1.8em, 4vw, 4em);
    }
    .row-gap-l-5 {
        row-gap: clamp(2.2em, 5vw, 5em);
    }
    .row-gap-l-6 {
        row-gap: clamp(2.6em, 6vw, 6em);
    }
    .row-gap-l-7 {
        row-gap: clamp(3em, 7vw, 7em);
    }
    .row-gap-l-8 {
        row-gap: clamp(3.4em, 8vw, 8em);
    }
    .row-gap-l-9 {
        row-gap: clamp(3.8em, 9vw, 9em);
    }
    .row-gap-l-10 {
        row-gap: clamp(4.2em, 10vw, 10em);
    }  
    .row-gap-l-11 {
        row-gap: clamp(4.6em, 11vw, 11em);
    }
    .row-gap-l-12 {
        row-gap: clamp(5em, 12vw, 12em);
    }
    .row-gap-l-13 {
        row-gap: clamp(5.4em, 13vw, 13em);
    }
    .row-gap-l-14 {
        row-gap: clamp(5.8em, 14vw, 14em);
    }
    .row-gap-l-15 {
        row-gap: clamp(6.2em, 15vw, 15em);
    }
    .row-gap-l-16 {
        row-gap: clamp(6.6em, 16vw, 16em);
    }
    .row-gap-l-17 {
        row-gap: clamp(7em, 17vw, 17em);
    }
    .row-gap-l-18 {
        row-gap: clamp(7.4em, 18vw, 18em);
    }
    .row-gap-l-19 {
        row-gap: clamp(7.8em, 19vw, 19em);
    }
    .row-gap-l-20 {
        row-gap: clamp(8.2em, 20vw, 20em);
    }

    .column-gap-l-1 {
        column-gap: clamp(0.4vw, 1vw, 1em);
    }
    .column-gap-l-2 {
        column-gap: clamp(0.8vw, 2vw, 2em);
    }
    .column-gap-l-3 {
        column-gap: clamp(1.2vw, 3vw, 3em);
    }
    .column-gap-l-4 {
        column-gap: clamp(1.6vw, 4vw, 4em);
    }
    .column-gap-l-5 {
        column-gap: clamp(2vw, 5vw, 5em);
    }
    .column-gap-l-6 {
        column-gap: clamp(2.4vw, 6vw, 6em);
    }
    .column-gap-l-7 {
        column-gap: clamp(2.8vw, 7vw, 7em);
    }
    .column-gap-l-8 {
        column-gap: clamp(3.2vw, 8vw, 8em);
    }
    .column-gap-l-9 {
        column-gap: clamp(3.6vw, 9vw, 9em);
    }
    .column-gap-l-10 {
        column-gap: clamp(4vw, 10vw, 10em);
    }

}


/* LARGE M */

@media only screen and (max-width: 900px) {

    .row-gap-m-1 {
        row-gap: clamp(0.4em, 1vw, 1em);
    }
    .row-gap-m-2 {
        row-gap: clamp(0.8em, 2vw, 2em);
    }
    .row-gap-m-3 {
        row-gap: clamp(1.4em, 3vw, 3em);
    }
    .row-gap-m-4 {
        row-gap: clamp(1.8em, 4vw, 4em);
    }
    .row-gap-m-5 {
        row-gap: clamp(2.2em, 5vw, 5em);
    }
    .row-gap-m-6 {
        row-gap: clamp(2.6em, 6vw, 6em);
    }
    .row-gap-m-7 {
        row-gap: clamp(3em, 7vw, 7em);
    }
    .row-gap-m-8 {
        row-gap: clamp(3.4em, 8vw, 8em);
    }
    .row-gap-m-9 {
        row-gap: clamp(3.8em, 9vw, 9em);
    }
    .row-gap-m-10 {
        row-gap: clamp(4.2em, 10vw, 10em);
    }  
    .row-gap-m-11 {
        row-gap: clamp(4.6em, 11vw, 11em);
    }
    .row-gap-m-12 {
        row-gap: clamp(5em, 12vw, 12em);
    }
    .row-gap-m-13 {
        row-gap: clamp(5.4em, 13vw, 13em);
    }
    .row-gap-m-14 {
        row-gap: clamp(5.8em, 14vw, 14em);
    }
    .row-gap-m-15 {
        row-gap: clamp(6.2em, 15vw, 15em);
    }
    .row-gap-m-16 {
        row-gap: clamp(6.6em, 16vw, 16em);
    }
    .row-gap-m-17 {
        row-gap: clamp(7em, 17vw, 17em);
    }
    .row-gap-m-18 {
        row-gap: clamp(7.4em, 18vw, 18em);
    }
    .row-gap-m-19 {
        row-gap: clamp(7.8em, 19vw, 19em);
    }
    .row-gap-m-20 {
        row-gap: clamp(8.2em, 20vw, 20em);
    }

    .column-gap-m-1 {
        column-gap: clamp(0.4vw, 1vw, 1em);
    }
    .column-gap-m-2 {
        column-gap: clamp(0.8vw, 2vw, 2em);
    }
    .column-gap-m-3 {
        column-gap: clamp(1.2vw, 3vw, 3em);
    }
    .column-gap-m-4 {
        column-gap: clamp(1.6vw, 4vw, 4em);
    }
    .column-gap-m-5 {
        column-gap: clamp(2vw, 5vw, 5em);
    }
    .column-gap-m-6 {
        column-gap: clamp(2.4vw, 6vw, 6em);
    }
    .column-gap-m-7 {
        column-gap: clamp(2.8vw, 7vw, 7em);
    }
    .column-gap-m-8 {
        column-gap: clamp(3.2vw, 8vw, 8em);
    }
    .column-gap-m-9 {
        column-gap: clamp(3.6vw, 9vw, 9em);
    }
    .column-gap-m-10 {
        column-gap: clamp(4vw, 10vw, 10em);
    }

}


/* LARGE S */

@media only screen and (max-width: 700px) {

    .row-gap-s-1 {
        row-gap: clamp(0.4em, 1vw, 1em);
    }
    .row-gap-s-2 {
        row-gap: clamp(0.8em, 2vw, 2em);
    }
    .row-gap-s-3 {
        row-gap: clamp(1.4em, 3vw, 3em);
    }
    .row-gap-s-4 {
        row-gap: clamp(1.8em, 4vw, 4em);
    }
    .row-gap-s-5 {
        row-gap: clamp(2.2em, 5vw, 5em);
    }
    .row-gap-s-6 {
        row-gap: clamp(2.6em, 6vw, 6em);
    }
    .row-gap-s-7 {
        row-gap: clamp(3em, 7vw, 7em);
    }
    .row-gap-s-8 {
        row-gap: clamp(3.4em, 8vw, 8em);
    }
    .row-gap-s-9 {
        row-gap: clamp(3.8em, 9vw, 9em);
    }
    .row-gap-s-10 {
        row-gap: clamp(4.2em, 10vw, 10em);
    }  
    .row-gap-s-11 {
        row-gap: clamp(4.6em, 11vw, 11em);
    }
    .row-gap-s-12 {
        row-gap: clamp(5em, 12vw, 12em);
    }
    .row-gap-s-13 {
        row-gap: clamp(5.4em, 13vw, 13em);
    }
    .row-gap-s-14 {
        row-gap: clamp(5.8em, 14vw, 14em);
    }
    .row-gap-s-15 {
        row-gap: clamp(6.2em, 15vw, 15em);
    }
    .row-gap-s-16 {
        row-gap: clamp(6.6em, 16vw, 16em);
    }
    .row-gap-s-17 {
        row-gap: clamp(7em, 17vw, 17em);
    }
    .row-gap-s-18 {
        row-gap: clamp(7.4em, 18vw, 18em);
    }
    .row-gap-s-19 {
        row-gap: clamp(7.8em, 19vw, 19em);
    }
    .row-gap-s-20 {
        row-gap: clamp(8.2em, 20vw, 20em);
    }

    .column-gap-s-1 {
        column-gap: clamp(0.4vw, 1vw, 1em);
    }
    .column-gap-s-2 {
        column-gap: clamp(0.8vw, 2vw, 2em);
    }
    .column-gap-s-3 {
        column-gap: clamp(1.2vw, 3vw, 3em);
    }
    .column-gap-s-4 {
        column-gap: clamp(1.6vw, 4vw, 4em);
    }
    .column-gap-s-5 {
        column-gap: clamp(2vw, 5vw, 5em);
    }
    .column-gap-s-6 {
        column-gap: clamp(2.4vw, 6vw, 6em);
    }
    .column-gap-s-7 {
        column-gap: clamp(2.8vw, 7vw, 7em);
    }
    .column-gap-s-8 {
        column-gap: clamp(3.2vw, 8vw, 8em);
    }
    .column-gap-s-9 {
        column-gap: clamp(3.6vw, 9vw, 9em);
    }
    .column-gap-s-10 {
        column-gap: clamp(4vw, 10vw, 10em);
    }

}


/* LARGE XS */

@media only screen and (max-width: 450px) {

    .row-gap-xs-1 {
        row-gap: clamp(0.4em, 1vw, 1em);
    }
    .row-gap-xs-2 {
        row-gap: clamp(0.8em, 2vw, 2em);
    }
    .row-gap-xs-3 {
        row-gap: clamp(1.4em, 3vw, 3em);
    }
    .row-gap-xs-4 {
        row-gap: clamp(1.8em, 4vw, 4em);
    }
    .row-gap-xs-5 {
        row-gap: clamp(2.2em, 5vw, 5em);
    }
    .row-gap-xs-6 {
        row-gap: clamp(2.6em, 6vw, 6em);
    }
    .row-gap-xs-7 {
        row-gap: clamp(3em, 7vw, 7em);
    }
    .row-gap-xs-8 {
        row-gap: clamp(3.4em, 8vw, 8em);
    }
    .row-gap-xs-9 {
        row-gap: clamp(3.8em, 9vw, 9em);
    }
    .row-gap-xs-10 {
        row-gap: clamp(4.2em, 10vw, 10em);
    }  
    .row-gap-xs-11 {
        row-gap: clamp(4.6em, 11vw, 11em);
    }
    .row-gap-xs-12 {
        row-gap: clamp(5em, 12vw, 12em);
    }
    .row-gap-xs-13 {
        row-gap: clamp(5.4em, 13vw, 13em);
    }
    .row-gap-xs-14 {
        row-gap: clamp(5.8em, 14vw, 14em);
    }
    .row-gap-xs-15 {
        row-gap: clamp(6.2em, 15vw, 15em);
    }
    .row-gap-xs-16 {
        row-gap: clamp(6.6em, 16vw, 16em);
    }
    .row-gap-xs-17 {
        row-gap: clamp(7em, 17vw, 17em);
    }
    .row-gap-xs-18 {
        row-gap: clamp(7.4em, 18vw, 18em);
    }
    .row-gap-xs-19 {
        row-gap: clamp(7.8em, 19vw, 19em);
    }
    .row-gap-xs-20 {
        row-gap: clamp(8.2em, 20vw, 20em);
    }

    .column-gap-xs-1 {
        column-gap: clamp(0.4vw, 1vw, 1em);
    }
    .column-gap-xs-2 {
        column-gap: clamp(0.8vw, 2vw, 2em);
    }
    .column-gap-xs-3 {
        column-gap: clamp(1.2vw, 3vw, 3em);
    }
    .column-gap-xs-4 {
        column-gap: clamp(1.6vw, 4vw, 4em);
    }
    .column-gap-xs-5 {
        column-gap: clamp(2vw, 5vw, 5em);
    }
    .column-gap-xs-6 {
        column-gap: clamp(2.4vw, 6vw, 6em);
    }
    .column-gap-xs-7 {
        column-gap: clamp(2.8vw, 7vw, 7em);
    }
    .column-gap-xs-8 {
        column-gap: clamp(3.2vw, 8vw, 8em);
    }
    .column-gap-xs-9 {
        column-gap: clamp(3.6vw, 9vw, 9em);
    }
    .column-gap-xs-10 {
        column-gap: clamp(4vw, 10vw, 10em);
    }

}








/*------------------------------------------------------------------------------------------------------------------------------
                                                    4 SPACINGS (Margins & Paddings)
------------------------------------------------------------------------------------------------------------------------------*/



/* ================================ MARGINS ================================ */


.mt-1 {
    margin-top: clamp(0.8em, 1vw, 1em);
}
.mt-2 {
    margin-top: clamp(1.2em, 2vw, 2em);
}
.mt-3 {
    margin-top: clamp(1.6em, 3vw, 3em);
}
.mt-4 {
    margin-top: clamp(2em, 4vw, 4em);
}
.mt-5 {
    margin-top: clamp(2.4em, 5vw, 5em);
}
.mt-6 {
    margin-top: clamp(2.8em, 6vw, 6em);
}
.mt-7 {
    margin-top: clamp(3.2em, 7vw, 7em);
}
.mt-8 {
    margin-top: clamp(3.6em, 8vw, 8em);
}
.mt-9 {
    margin-top: clamp(4em, 9vw, 9em);
}
.mt-10 {
    margin-top: clamp(5em, 10vw, 10em);
}
.mt-11 {
    margin-top: clamp(5.4em, 11vw, 11em);
}
.mt-12 {
    margin-top: clamp(5.8em, 12vw, 12em);
}
.mt-13 {
    margin-top: clamp(6.2em, 13vw, 13em);
}
.mt-14 {
    margin-top: clamp(6.6em, 14vw, 14em);
}
.mt-15 {
    margin-top: clamp(7em, 15vw, 15em);
}
.mt-16 {
    margin-top: clamp(7.4em, 16vw, 16em);
}
.mt-17 {
    margin-top: clamp(7.8em, 17vw, 17em);
}
.mt-18 {
    margin-top: clamp(8.2em, 18vw, 18em);
}
.mt-19 {
    margin-top: clamp(8.6em, 19vw, 19em);
}
.mt-20 {
    margin-top: clamp(10em, 20vw, 20em);
}
.mt-21 {
    margin-top: clamp(10.4em, 21vw, 21em);
}
.mt-22 {
    margin-top: clamp(10.8em, 22vw, 22em);
}
.mt-23 {
    margin-top: clamp(11.2em, 23vw, 23em);
}
.mt-24 {
    margin-top: clamp(11.6em, 24vw, 24em);
}
.mt-25 {
    margin-top: clamp(12em, 25vw, 25em);
}
.mt-26 {
    margin-top: clamp(12.4em, 26vw, 26em);
}
.mt-27 {
    margin-top: clamp(12.8em, 27vw, 27em);
}
.mt-28 {
    margin-top: clamp(13.2em, 28vw, 28em);
}
.mt-29 {
    margin-top: clamp(13.6em, 29vw, 29em);
}
.mt-30 {
    margin-top: clamp(15em, 30vw, 30em);
}

.mb-1 {
    margin-bottom: clamp(0.8em, 1vw, 1em);
}
.mb-2 {
    margin-bottom: clamp(1.2em, 2vw, 2em);
}
.mb-3 {
    margin-bottom: clamp(1.6em, 3vw, 3em);
}
.mb-4 {
    margin-bottom: clamp(2em, 4vw, 4em);
}
.mb-5 {
    margin-bottom: clamp(2.4em, 5vw, 5em);
}
.mb-6 {
    margin-bottom: clamp(2.8em, 6vw, 6em);
}
.mb-7 {
    margin-bottom: clamp(3.2em, 7vw, 7em);
}
.mb-8 {
    margin-bottom: clamp(3.6em, 8vw, 8em);
}
.mb-9 {
    margin-bottom: clamp(4em, 9vw, 9em);
}
.mb-10 {
    margin-bottom: clamp(5em, 10vw, 10em);
}
.mb-11 {
    margin-bottom: clamp(5.4em, 11vw, 11em);
}
.mb-12 {
    margin-bottom: clamp(5.8em, 12vw, 12em);
}
.mb-13 {
    margin-bottom: clamp(6.2em, 13vw, 13em);
}
.mb-14 {
    margin-bottom: clamp(6.6em, 14vw, 14em);
}
.mb-15 {
    margin-bottom: clamp(7em, 15vw, 15em);
}
.mb-16 {
    margin-bottom: clamp(7.4em, 16vw, 16em);
}
.mb-17 {
    margin-bottom: clamp(7.8em, 17vw, 17em);
}
.mb-18 {
    margin-bottom: clamp(8.2em, 18vw, 18em);
}
.mb-19 {
    margin-bottom: clamp(8.6em, 19vw, 19em);
}
.mb-20 {
    margin-bottom: clamp(10em, 20vw, 20em);
}
.mb-21 {
    margin-bottom: clamp(10.4em, 21vw, 21em);
}
.mb-22 {
    margin-bottom: clamp(10.8em, 22vw, 22em);
}
.mb-23 {
    margin-bottom: clamp(11.2em, 23vw, 23em);
}
.mb-24 {
    margin-bottom: clamp(11.6em, 24vw, 24em);
}
.mb-25 {
    margin-bottom: clamp(12em, 25vw, 25em);
}
.mb-26 {
    margin-bottom: clamp(12.4em, 26vw, 26em);
}
.mb-27 {
    margin-bottom: clamp(12.8em, 27vw, 27em);
}
.mb-28 {
    margin-bottom: clamp(13.2em, 28vw, 28em);
}
.mb-29 {
    margin-bottom: clamp(13.6em, 29vw, 29em);
}
.mb-30 {
    margin-bottom: clamp(15em, 30vw, 30em);
}

.ml-1 {
    margin-left: clamp(0.8em, 1vw, 1em);
}
.ml-2 {
    margin-left: clamp(1.2em, 2vw, 2em);
}
.ml-3 {
    margin-left: clamp(1.6em, 3vw, 3em);
}
.ml-4 {
    margin-left: clamp(2em, 4vw, 4em);
}
.ml-5 {
    margin-left: clamp(2.4em, 5vw, 5em);
}
.ml-6 {
    margin-left: clamp(2.8em, 6vw, 6em);
}
.ml-7 {
    margin-left: clamp(3.2em, 7vw, 7em);
}
.ml-8 {
    margin-left: clamp(3.6em, 8vw, 8em);
}
.ml-9 {
    margin-left: clamp(4em, 9vw, 9em);
}
.ml-10 {
    margin-left: clamp(5em, 10vw, 10em);
}
.ml-11 {
    margin-left: clamp(5.4em, 11vw, 11em);
}
.ml-12 {
    margin-left: clamp(5.8em, 12vw, 12em);
}
.ml-13 {
    margin-left: clamp(6.2em, 13vw, 13em);
}
.ml-14 {
    margin-left: clamp(6.6em, 14vw, 14em);
}
.ml-15 {
    margin-left: clamp(7em, 15vw, 15em);
}
.ml-16 {
    margin-left: clamp(7.4em, 16vw, 16em);
}
.ml-17 {
    margin-left: clamp(7.8em, 17vw, 17em);
}
.ml-18 {
    margin-left: clamp(8.2em, 18vw, 18em);
}
.ml-19 {
    margin-left: clamp(8.6em, 19vw, 19em);
}
.ml-20 {
    margin-left: clamp(10em, 20vw, 20em);
}
.ml-21 {
    margin-left: clamp(10.4em, 21vw, 21em);
}
.ml-22 {
    margin-left: clamp(10.8em, 22vw, 22em);
}
.ml-23 {
    margin-left: clamp(11.2em, 23vw, 23em);
}
.ml-24 {
    margin-left: clamp(11.6em, 24vw, 24em);
}
.ml-25 {
    margin-left: clamp(12em, 25vw, 25em);
}
.ml-26 {
    margin-left: clamp(12.4em, 26vw, 26em);
}
.ml-27 {
    margin-left: clamp(12.8em, 27vw, 27em);
}
.ml-28 {
    margin-left: clamp(13.2em, 28vw, 28em);
}
.ml-29 {
    margin-left: clamp(13.6em, 29vw, 29em);
}
.ml-30 {
    margin-left: clamp(15em, 30vw, 30em);
}

.mr-1 {
    margin-right: clamp(0.8em, 1vw, 1em);
}
.mr-2 {
    margin-right: clamp(1.2em, 2vw, 2em);
}
.mr-3 {
    margin-right: clamp(1.6em, 3vw, 3em);
}
.mr-4 {
    margin-right: clamp(2em, 4vw, 4em);
}
.mr-5 {
    margin-right: clamp(2.4em, 5vw, 5em);
}
.mr-6 {
    margin-right: clamp(2.8em, 6vw, 6em);
}
.mr-7 {
    margin-right: clamp(3.2em, 7vw, 7em);
}
.mr-8 {
    margin-right: clamp(3.6em, 8vw, 8em);
}
.mr-9 {
    margin-right: clamp(4em, 9vw, 9em);
}
.mr-10 {
    margin-right: clamp(5em, 10vw, 10em);
}
.mr-11 {
    margin-right: clamp(5.4em, 11vw, 11em);
}
.mr-12 {
    margin-right: clamp(5.8em, 12vw, 12em);
}
.mr-13 {
    margin-right: clamp(6.2em, 13vw, 13em);
}
.mr-14 {
    margin-right: clamp(6.6em, 14vw, 14em);
}
.mr-15 {
    margin-right: clamp(7em, 15vw, 15em);
}
.mr-16 {
    margin-right: clamp(7.4em, 16vw, 16em);
}
.mr-17 {
    margin-right: clamp(7.8em, 17vw, 17em);
}
.mr-18 {
    margin-right: clamp(8.2em, 18vw, 18em);
}
.mr-19 {
    margin-right: clamp(8.6em, 19vw, 19em);
}
.mr-20 {
    margin-right: clamp(10em, 20vw, 20em);
}
.mr-21 {
    margin-right: clamp(10.4em, 21vw, 21em);
}
.mr-22 {
    margin-right: clamp(10.8em, 22vw, 22em);
}
.mr-23 {
    margin-right: clamp(11.2em, 23vw, 23em);
}
.mr-24 {
    margin-right: clamp(11.6em, 24vw, 24em);
}
.mr-25 {
    margin-right: clamp(12em, 25vw, 25em);
}
.mr-26 {
    margin-right: clamp(12.4em, 26vw, 26em);
}
.mr-27 {
    margin-right: clamp(12.8em, 27vw, 27em);
}
.mr-28 {
    margin-right: clamp(13.2em, 28vw, 28em);
}
.mr-29 {
    margin-right: clamp(13.6em, 29vw, 29em);
}
.mr-30 {
    margin-right: clamp(15em, 30vw, 30em);
}




/* ================================ PADDINGS ================================ */


.pt-1 {
    padding-top: clamp(0.8em, 1vw, 1em);
}
.pt-2 {
    padding-top: clamp(1.2em, 2vw, 2em);
}
.pt-3 {
    padding-top: clamp(1.6em, 3vw, 3em);
}
.pt-4 {
    padding-top: clamp(2em, 4vw, 4em);
}
.pt-5 {
    padding-top: clamp(2.4em, 5vw, 5em);
}
.pt-6 {
    padding-top: clamp(2.8em, 6vw, 6em);
}
.pt-7 {
    padding-top: clamp(3.2em, 7vw, 7em);
}
.pt-8 {
    padding-top: clamp(3.6em, 8vw, 8em);
}
.pt-9 {
    padding-top: clamp(4em, 9vw, 9em);
}
.pt-10 {
    padding-top: clamp(5em, 10vw, 10em);
}
.pt-11 {
    padding-top: clamp(5.4em, 11vw, 11em);
}
.pt-12 {
    padding-top: clamp(5.8em, 12vw, 12em);
}
.pt-13 {
    padding-top: clamp(6.2em, 13vw, 13em);
}
.pt-14 {
    padding-top: clamp(6.6em, 14vw, 14em);
}
.pt-15 {
    padding-top: clamp(7em, 15vw, 15em);
}
.pt-16 {
    padding-top: clamp(7.4em, 16vw, 16em);
}
.pt-17 {
    padding-top: clamp(7.8em, 17vw, 17em);
}
.pt-18 {
    padding-top: clamp(8.2em, 18vw, 18em);
}
.pt-19 {
    padding-top: clamp(8.6em, 19vw, 19em);
}
.pt-20 {
    padding-top: clamp(10em, 20vw, 20em);
}
.pt-21 {
    padding-top: clamp(10.4em, 21vw, 21em);
}
.pt-22 {
    padding-top: clamp(10.8em, 22vw, 22em);
}
.pt-23 {
    padding-top: clamp(11.2em, 23vw, 23em);
}
.pt-24 {
    padding-top: clamp(11.6em, 24vw, 24em);
}
.pt-25 {
    padding-top: clamp(12em, 25vw, 25em);
}
.pt-26 {
    padding-top: clamp(12.4em, 26vw, 26em);
}
.pt-27 {
    padding-top: clamp(12.8em, 27vw, 27em);
}
.pt-28 {
    padding-top: clamp(13.2em, 28vw, 28em);
}
.pt-29 {
    padding-top: clamp(13.6em, 29vw, 29em);
}
.pt-30 {
    padding-top: clamp(15em, 30vw, 30em);
}


.pb-1 {
    padding-bottom: clamp(0.8em, 1vw, 1em);
}
.pb-2 {
    padding-bottom: clamp(1.2em, 2vw, 2em);
}
.pb-3 {
    padding-bottom: clamp(1.6em, 3vw, 3em);
}
.pb-4 {
    padding-bottom: clamp(2em, 4vw, 4em);
}
.pb-5 {
    padding-bottom: clamp(2.4em, 5vw, 5em);
}
.pb-6 {
    padding-bottom: clamp(2.8em, 6vw, 6em);
}
.pb-7 {
    padding-bottom: clamp(3.2em, 7vw, 7em);
}
.pb-8 {
    padding-bottom: clamp(3.6em, 8vw, 8em);
}
.pb-9 {
    padding-bottom: clamp(4em, 9vw, 9em);
}
.pb-10 {
    padding-bottom: clamp(5em, 10vw, 10em);
}
.pb-11 {
    padding-bottom: clamp(5.4em, 11vw, 11em);
}
.pb-12 {
    padding-bottom: clamp(5.8em, 12vw, 12em);
}
.pb-13 {
    padding-bottom: clamp(6.2em, 13vw, 13em);
}
.pb-14 {
    padding-bottom: clamp(6.6em, 14vw, 14em);
}
.pb-15 {
    padding-bottom: clamp(7em, 15vw, 15em);
}
.pb-16 {
    padding-bottom: clamp(7.4em, 16vw, 16em);
}
.pb-17 {
    padding-bottom: clamp(7.8em, 17vw, 17em);
}
.pb-18 {
    padding-bottom: clamp(8.2em, 18vw, 18em);
}
.pb-19 {
    padding-bottom: clamp(8.6em, 19vw, 19em);
}
.pb-20 {
    padding-bottom: clamp(10em, 20vw, 20em);
}
.pb-21 {
    padding-bottom: clamp(10.4em, 21vw, 21em);
}
.pb-22 {
    padding-bottom: clamp(10.8em, 22vw, 22em);
}
.pb-23 {
    padding-bottom: clamp(11.2em, 23vw, 23em);
}
.pb-24 {
    padding-bottom: clamp(11.6em, 24vw, 24em);
}
.pb-25 {
    padding-bottom: clamp(12em, 25vw, 25em);
}
.pb-26 {
    padding-bottom: clamp(12.4em, 26vw, 26em);
}
.pb-27 {
    padding-bottom: clamp(12.8em, 27vw, 27em);
}
.pb-28 {
    padding-bottom: clamp(13.2em, 28vw, 28em);
}
.pb-29 {
    padding-bottom: clamp(13.6em, 29vw, 29em);
}
.pb-30 {
    padding-bottom: clamp(15em, 30vw, 30em);
}



.pl-1 {
    padding-left: clamp(0.8em, 1vw, 1em);
}
.pl-2 {
    padding-left: clamp(1.2em, 2vw, 2em);
}
.pl-3 {
    padding-left: clamp(1.6em, 3vw, 3em);
}
.pl-4 {
    padding-left: clamp(2em, 4vw, 4em);
}
.pl-5 {
    padding-left: clamp(2.4em, 5vw, 5em);
}
.pl-6 {
    padding-left: clamp(2.8em, 6vw, 6em);
}
.pl-7 {
    padding-left: clamp(3.2em, 7vw, 7em);
}
.pl-8 {
    padding-left: clamp(3.6em, 8vw, 8em);
}
.pl-9 {
    padding-left: clamp(4em, 9vw, 9em);
}
.pl-10 {
    padding-left: clamp(5em, 10vw, 10em);
}
.pl-11 {
    padding-left: clamp(5.4em, 11vw, 11em);
}
.pl-12 {
    padding-left: clamp(5.8em, 12vw, 12em);
}
.pl-13 {
    padding-left: clamp(6.2em, 13vw, 13em);
}
.pl-14 {
    padding-left: clamp(6.6em, 14vw, 14em);
}
.pl-15 {
    padding-left: clamp(7em, 15vw, 15em);
}
.pl-16 {
    padding-left: clamp(7.4em, 16vw, 16em);
}
.pl-17 {
    padding-left: clamp(7.8em, 17vw, 17em);
}
.pl-18 {
    padding-left: clamp(8.2em, 18vw, 18em);
}
.pl-19 {
    padding-left: clamp(8.6em, 19vw, 19em);
}
.pl-20 {
    padding-left: clamp(10em, 20vw, 20em);
}
.pl-21 {
    padding-left: clamp(10.4em, 21vw, 21em);
}
.pl-22 {
    padding-left: clamp(10.8em, 22vw, 22em);
}
.pl-23 {
    padding-left: clamp(11.2em, 23vw, 23em);
}
.pl-24 {
    padding-left: clamp(11.6em, 24vw, 24em);
}
.pl-25 {
    padding-left: clamp(12em, 25vw, 25em);
}
.pl-26 {
    padding-left: clamp(12.4em, 26vw, 26em);
}
.pl-27 {
    padding-left: clamp(12.8em, 27vw, 27em);
}
.pl-28 {
    padding-left: clamp(13.2em, 28vw, 28em);
}
.pl-29 {
    padding-left: clamp(13.6em, 29vw, 29em);
}
.pl-30 {
    padding-left: clamp(15em, 30vw, 30em);
}


.pr-1 {
    padding-right: clamp(0.8em, 1vw, 1em);
}
.pr-2 {
    padding-right: clamp(1.2em, 2vw, 2em);
}
.pr-3 {
    padding-right: clamp(1.6em, 3vw, 3em);
}
.pr-4 {
    padding-right: clamp(2em, 4vw, 4em);
}
.pr-5 {
    padding-right: clamp(2.4em, 5vw, 5em);
}
.pr-6 {
    padding-right: clamp(2.8em, 6vw, 6em);
}
.pr-7 {
    padding-right: clamp(3.2em, 7vw, 7em);
}
.pr-8 {
    padding-right: clamp(3.6em, 8vw, 8em);
}
.pr-9 {
    padding-right: clamp(4em, 9vw, 9em);
}
.pr-10 {
    padding-right: clamp(5em, 10vw, 10em);
}
.pr-11 {
    padding-right: clamp(5.4em, 11vw, 11em);
}
.pr-12 {
    padding-right: clamp(5.8em, 12vw, 12em);
}
.pr-13 {
    padding-right: clamp(6.2em, 13vw, 13em);
}
.pr-14 {
    padding-right: clamp(6.6em, 14vw, 14em);
}
.pr-15 {
    padding-right: clamp(7em, 15vw, 15em);
}
.pr-16 {
    padding-right: clamp(7.4em, 16vw, 16em);
}
.pr-17 {
    padding-right: clamp(7.8em, 17vw, 17em);
}
.pr-18 {
    padding-right: clamp(8.2em, 18vw, 18em);
}
.pr-19 {
    padding-right: clamp(8.6em, 19vw, 19em);
}
.pr-20 {
    padding-right: clamp(10em, 20vw, 20em);
}
.pr-21 {
    padding-right: clamp(10.4em, 21vw, 21em);
}
.pr-22 {
    padding-right: clamp(10.8em, 22vw, 22em);
}
.pr-23 {
    padding-right: clamp(11.2em, 23vw, 23em);
}
.pr-24 {
    padding-right: clamp(11.6em, 24vw, 24em);
}
.pr-25 {
    padding-right: clamp(12em, 25vw, 25em);
}
.pr-26 {
    padding-right: clamp(12.4em, 26vw, 26em);
}
.pr-27 {
    padding-right: clamp(12.8em, 27vw, 27em);
}
.pr-28 {
    padding-right: clamp(13.2em, 28vw, 28em);
}
.pr-29 {
    padding-right: clamp(13.6em, 29vw, 29em);
}
.pr-30 {
    padding-right: clamp(15em, 30vw, 30em);
}





/* ===================================== RESPONSIVE ===================================== */

/* /////////// BREAKPOINTS ///////////

1100px = L
 900px = M
 700px = S
 450px = XS

/////////// */


/* LARGE L */

@media only screen and (max-width: 1100px) { 
    .mt-l-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-l-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-l-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-l-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-l-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-l-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-l-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-l-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-l-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-l-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-l-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-l-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-l-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-l-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-l-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    .mt-l-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-l-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-l-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-l-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-l-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }
    
    .mb-l-1 {
        margin-bottom: clamp(0.8em, 1vw, 1em);
    }
    .mb-l-2 {
        margin-bottom: clamp(1.2em, 2vw, 2em);
    }
    .mb-l-3 {
        margin-bottom: clamp(1.6em, 3vw, 3em);
    }
    .mb-l-4 {
        margin-bottom: clamp(2em, 4vw, 4em);
    }
    .mb-l-5 {
        margin-bottom: clamp(2.4em, 5vw, 5em);
    }
    .mb-l-6 {
        margin-bottom: clamp(2.8em, 6vw, 6em);
    }
    .mb-l-7 {
        margin-bottom: clamp(3.2em, 7vw, 7em);
    }
    .mb-l-8 {
        margin-bottom: clamp(3.6em, 8vw, 8em);
    }
    .mb-l-9 {
        margin-bottom: clamp(4em, 9vw, 9em);
    }
    .mb-l-10 {
        margin-bottom: clamp(5em, 10vw, 10em);
    }
    .mb-l-11 {
        margin-bottom: clamp(5.4em, 11vw, 11em);
    }
    .mb-l-12 {
        margin-bottom: clamp(5.8em, 12vw, 12em);
    }
    .mb-l-13 {
        margin-bottom: clamp(6.2em, 13vw, 13em);
    }
    .mb-l-14 {
        margin-bottom: clamp(6.6em, 14vw, 14em);
    }
    .mb-l-15 {
        margin-bottom: clamp(7em, 15vw, 15em);
    }
    .mb-l-16 {
        margin-bottom: clamp(7.4em, 16vw, 16em);
    }
    .mb-l-17 {
        margin-bottom: clamp(7.8em, 17vw, 17em);
    }
    .mb-l-18 {
        margin-bottom: clamp(8.2em, 18vw, 18em);
    }
    .mb-l-19 {
        margin-bottom: clamp(8.6em, 19vw, 19em);
    }
    .mb-l-20 {
        margin-bottom: clamp(10em, 20vw, 20em);
    }
    
    .ml-l-1 {
        margin-left: clamp(0.8em, 1vw, 1em);
    }
    .ml-l-2 {
        margin-left: clamp(1.2em, 2vw, 2em);
    }
    .ml-l-3 {
        margin-left: clamp(1.6em, 3vw, 3em);
    }
    .ml-l-4 {
        margin-left: clamp(2em, 4vw, 4em);
    }
    .ml-l-5 {
        margin-left: clamp(2.4em, 5vw, 5em);
    }
    .ml-l-6 {
        margin-left: clamp(2.8em, 6vw, 6em);
    }
    .ml-l-7 {
        margin-left: clamp(3.2em, 7vw, 7em);
    }
    .ml-l-8 {
        margin-left: clamp(3.6em, 8vw, 8em);
    }
    .ml-l-9 {
        margin-left: clamp(4em, 9vw, 9em);
    }
    .ml-l-10 {
        margin-left: clamp(5em, 10vw, 10em);
    }
    .ml-l-11 {
        margin-left: clamp(5.4em, 11vw, 11em);
    }
    .ml-l-12 {
        margin-left: clamp(5.8em, 12vw, 12em);
    }
    .ml-l-13 {
        margin-left: clamp(6.2em, 13vw, 13em);
    }
    .ml-l-14 {
        margin-left: clamp(6.6em, 14vw, 14em);
    }
    .ml-l-15 {
        margin-left: clamp(7em, 15vw, 15em);
    }
    .ml-l-16 {
        margin-left: clamp(7.4em, 16vw, 16em);
    }
    .ml-l-17 {
        margin-left: clamp(7.8em, 17vw, 17em);
    }
    .ml-l-18 {
        margin-left: clamp(8.2em, 18vw, 18em);
    }
    .ml-l-19 {
        margin-left: clamp(8.6em, 19vw, 19em);
    }
    .ml-l-20 {
        margin-left: clamp(10em, 20vw, 20em);
    }
    
    .mr-l-1 {
        margin-right: clamp(0.8em, 1vw, 1em);
    }
    .mr-l-2 {
        margin-right: clamp(1.2em, 2vw, 2em);
    }
    .mr-l-3 {
        margin-right: clamp(1.6em, 3vw, 3em);
    }
    .mr-l-4 {
        margin-right: clamp(2em, 4vw, 4em);
    }
    .mr-l-5 {
        margin-right: clamp(2.4em, 5vw, 5em);
    }
    .mr-l-6 {
        margin-right: clamp(2.8em, 6vw, 6em);
    }
    .mr-l-7 {
        margin-right: clamp(3.2em, 7vw, 7em);
    }
    .mr-l-8 {
        margin-right: clamp(3.6em, 8vw, 8em);
    }
    .mr-l-9 {
        margin-right: clamp(4em, 9vw, 9em);
    }
    .mr-l-10 {
        margin-right: clamp(5em, 10vw, 10em);
    }
    .mr-l-11 {
        margin-right: clamp(5.4em, 11vw, 11em);
    }
    .mr-l-12 {
        margin-right: clamp(5.8em, 12vw, 12em);
    }
    .mr-l-13 {
        margin-right: clamp(6.2em, 13vw, 13em);
    }
    .mr-l-14 {
        margin-right: clamp(6.6em, 14vw, 14em);
    }
    .mr-l-15 {
        margin-right: clamp(7em, 15vw, 15em);
    }
    .mr-l-16 {
        margin-right: clamp(7.4em, 16vw, 16em);
    }
    .mr-l-17 {
        margin-right: clamp(7.8em, 17vw, 17em);
    }
    .mr-l-18 {
        margin-right: clamp(8.2em, 18vw, 18em);
    }
    .mr-l-19 {
        margin-right: clamp(8.6em, 19vw, 19em);
    }
    .mr-l-20 {
        margin-right: clamp(10em, 20vw, 20em);
    }
    
    
    .pt-l-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-l-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-l-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-l-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-l-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-l-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-l-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-l-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-l-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-l-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-l-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-l-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-l-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-l-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-l-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-l-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-l-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-l-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-l-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-l-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }
    
    
    .pb-l-1 {
        padding-bottom: clamp(0.8em, 1vw, 1em);
    }
    .pb-l-2 {
        padding-bottom: clamp(1.2em, 2vw, 2em);
    }
    .pb-l-3 {
        padding-bottom: clamp(1.6em, 3vw, 3em);
    }
    .pb-l-4 {
        padding-bottom: clamp(2em, 4vw, 4em);
    }
    .pb-l-5 {
        padding-bottom: clamp(2.4em, 5vw, 5em);
    }
    .pb-l-6 {
        padding-bottom: clamp(2.8em, 6vw, 6em);
    }
    .pb-l-7 {
        padding-bottom: clamp(3.2em, 7vw, 7em);
    }
    .pb-l-8 {
        padding-bottom: clamp(3.6em, 8vw, 8em);
    }
    .pb-l-9 {
        padding-bottom: clamp(4em, 9vw, 9em);
    }
    .pb-l-10 {
        padding-bottom: clamp(5em, 10vw, 10em);
    }
    .pb-l-11 {
        padding-bottom: clamp(5.4em, 11vw, 11em);
    }
    .pb-l-12 {
        padding-bottom: clamp(5.8em, 12vw, 12em);
    }
    .pb-l-13 {
        padding-bottom: clamp(6.2em, 13vw, 13em);
    }
    .pb-l-14 {
        padding-bottom: clamp(6.6em, 14vw, 14em);
    }
    .pb-l-15 {
        padding-bottom: clamp(7em, 15vw, 15em);
    }
    .pb-l-16 {
        padding-bottom: clamp(7.4em, 16vw, 16em);
    }
    .pb-l-17 {
        padding-bottom: clamp(7.8em, 17vw, 17em);
    }
    .pb-l-18 {
        padding-bottom: clamp(8.2em, 18vw, 18em);
    }
    .pb-l-19 {
        padding-bottom: clamp(8.6em, 19vw, 19em);
    }
    .pb-l-20 {
        padding-bottom: clamp(10em, 20vw, 20em);
    }
    
    .pl-l-1 {
        padding-left: clamp(0.8em, 1vw, 1em);
    }
    .pl-l-2 {
        padding-left: clamp(1.2em, 2vw, 2em);
    }
    .pl-l-3 {
        padding-left: clamp(1.6em, 3vw, 3em);
    }
    .pl-l-4 {
        padding-left: clamp(2em, 4vw, 4em);
    }
    .pl-l-5 {
        padding-left: clamp(2.4em, 5vw, 5em);
    }
    .pl-l-6 {
        padding-left: clamp(2.8em, 6vw, 6em);
    }
    .pl-l-7 {
        padding-left: clamp(3.2em, 7vw, 7em);
    }
    .pl-l-8 {
        padding-left: clamp(3.6em, 8vw, 8em);
    }
    .pl-l-9 {
        padding-left: clamp(4em, 9vw, 9em);
    }
    .pl-l-10 {
        padding-left: clamp(5em, 10vw, 10em);
    }
    .pl-l-11 {
        padding-left: clamp(5.4em, 11vw, 11em);
    }
    .pl-l-12 {
        padding-left: clamp(5.8em, 12vw, 12em);
    }
    .pl-l-13 {
        padding-left: clamp(6.2em, 13vw, 13em);
    }
    .pl-l-14 {
        padding-left: clamp(6.6em, 14vw, 14em);
    }
    .pl-l-15 {
        padding-left: clamp(7em, 15vw, 15em);
    }
    .pl-l-16 {
        padding-left: clamp(7.4em, 16vw, 16em);
    }
    .pl-l-17 {
        padding-left: clamp(7.8em, 17vw, 17em);
    }
    .pl-l-18 {
        padding-left: clamp(8.2em, 18vw, 18em);
    }
    .pl-l-19 {
        padding-left: clamp(8.6em, 19vw, 19em);
    }
    .pl-l-20 {
        padding-left: clamp(10em, 20vw, 20em);
    }
    
    .pr-l-1 {
        padding-right: clamp(0.8em, 1vw, 1em);
    }
    .pr-l-2 {
        padding-right: clamp(1.2em, 2vw, 2em);
    }
    .pr-l-3 {
        padding-right: clamp(1.6em, 3vw, 3em);
    }
    .pr-l-4 {
        padding-right: clamp(2em, 4vw, 4em);
    }
    .pr-l-5 {
        padding-right: clamp(2.4em, 5vw, 5em);
    }
    .pr-l-6 {
        padding-right: clamp(2.8em, 6vw, 6em);
    }
    .pr-l-7 {
        padding-right: clamp(3.2em, 7vw, 7em);
    }
    .pr-l-8 {
        padding-right: clamp(3.6em, 8vw, 8em);
    }
    .pr-l-9 {
        padding-right: clamp(4em, 9vw, 9em);
    }
    .pr-l-10 {
        padding-right: clamp(5em, 10vw, 10em);
    }
    .pr-l-11 {
        padding-right: clamp(5.4em, 11vw, 11em);
    }
    .pr-l-12 {
        padding-right: clamp(5.8em, 12vw, 12em);
    }
    .pr-l-13 {
        padding-right: clamp(6.2em, 13vw, 13em);
    }
    .pr-l-14 {
        padding-right: clamp(6.6em, 14vw, 14em);
    }
    .pr-l-15 {
        padding-right: clamp(7em, 15vw, 15em);
    }
    .pr-l-16 {
        padding-right: clamp(7.4em, 16vw, 16em);
    }
    .pr-l-17 {
        padding-right: clamp(7.8em, 17vw, 17em);
    }
    .pr-l-18 {
        padding-right: clamp(8.2em, 18vw, 18em);
    }
    .pr-l-19 {
        padding-right: clamp(8.6em, 19vw, 19em);
    }
    .pr-l-20 {
        padding-right: clamp(10em, 20vw, 20em);
    }
}



/* MEDIUM M */

@media only screen and (max-width: 900px) { 

    .mt-m-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-m-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-m-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-m-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-m-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-m-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-m-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-m-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-m-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-m-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-m-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-m-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-m-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-m-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-m-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    
    .mb-m-1 {
        margin-bottom: clamp(0.8em, 1vw, 1em);
    }
    .mb-m-2 {
        margin-bottom: clamp(1.2em, 2vw, 2em);
    }
    .mb-m-3 {
        margin-bottom: clamp(1.6em, 3vw, 3em);
    }
    .mb-m-4 {
        margin-bottom: clamp(2em, 4vw, 4em);
    }
    .mb-m-5 {
        margin-bottom: clamp(2.4em, 5vw, 5em);
    }
    .mb-m-6 {
        margin-bottom: clamp(2.8em, 6vw, 6em);
    }
    .mb-m-7 {
        margin-bottom: clamp(3.2em, 7vw, 7em);
    }
    .mb-m-8 {
        margin-bottom: clamp(3.6em, 8vw, 8em);
    }
    .mb-m-9 {
        margin-bottom: clamp(4em, 9vw, 9em);
    }
    .mb-m-10 {
        margin-bottom: clamp(5em, 10vw, 10em);
    }
    .mb-m-11 {
        margin-bottom: clamp(5.4em, 11vw, 11em);
    }
    .mb-m-12 {
        margin-bottom: clamp(5.8em, 12vw, 12em);
    }
    .mb-m-13 {
        margin-bottom: clamp(6.2em, 13vw, 13em);
    }
    .mb-m-14 {
        margin-bottom: clamp(6.6em, 14vw, 14em);
    }
    .mb-m-15 {
        margin-bottom: clamp(7em, 15vw, 15em);
    }
    
    .ml-m-1 {
        margin-left: clamp(0.8em, 1vw, 1em);
    }
    .ml-m-2 {
        margin-left: clamp(1.2em, 2vw, 2em);
    }
    .ml-m-3 {
        margin-left: clamp(1.6em, 3vw, 3em);
    }
    .ml-m-4 {
        margin-left: clamp(2em, 4vw, 4em);
    }
    .ml-m-5 {
        margin-left: clamp(2.4em, 5vw, 5em);
    }
    .ml-m-6 {
        margin-left: clamp(2.8em, 6vw, 6em);
    }
    .ml-m-7 {
        margin-left: clamp(3.2em, 7vw, 7em);
    }
    .ml-m-8 {
        margin-left: clamp(3.6em, 8vw, 8em);
    }
    .ml-m-9 {
        margin-left: clamp(4em, 9vw, 9em);
    }
    .ml-m-10 {
        margin-left: clamp(5em, 10vw, 10em);
    }
    .ml-m-11 {
        margin-left: clamp(5.4em, 11vw, 11em);
    }
    .ml-m-12 {
        margin-left: clamp(5.8em, 12vw, 12em);
    }
    .ml-m-13 {
        margin-left: clamp(6.2em, 13vw, 13em);
    }
    .ml-m-14 {
        margin-left: clamp(6.6em, 14vw, 14em);
    }
    .ml-m-15 {
        margin-left: clamp(7em, 15vw, 15em);
    }
    
    .mr-m-1 {
        margin-right: clamp(0.8em, 1vw, 1em);
    }
    .mr-m-2 {
        margin-right: clamp(1.2em, 2vw, 2em);
    }
    .mr-m-3 {
        margin-right: clamp(1.6em, 3vw, 3em);
    }
    .mr-m-4 {
        margin-right: clamp(2em, 4vw, 4em);
    }
    .mr-m-5 {
        margin-right: clamp(2.4em, 5vw, 5em);
    }
    .mr-m-6 {
        margin-right: clamp(2.8em, 6vw, 6em);
    }
    .mr-m-7 {
        margin-right: clamp(3.2em, 7vw, 7em);
    }
    .mr-m-8 {
        margin-right: clamp(3.6em, 8vw, 8em);
    }
    .mr-m-9 {
        margin-right: clamp(4em, 9vw, 9em);
    }
    .mr-m-10 {
        margin-right: clamp(5em, 10vw, 10em);
    }
    .mr-m-11 {
        margin-right: clamp(5.4em, 11vw, 11em);
    }
    .mr-m-12 {
        margin-right: clamp(5.8em, 12vw, 12em);
    }
    .mr-m-13 {
        margin-right: clamp(6.2em, 13vw, 13em);
    }
    .mr-m-14 {
        margin-right: clamp(6.6em, 14vw, 14em);
    }
    .mr-m-15 {
        margin-right: clamp(7em, 15vw, 15em);
    }
    
    
    .pt-m-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-m-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-m-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-m-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-m-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-m-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-m-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-m-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-m-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-m-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-m-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-m-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-m-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-m-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-m-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    
    .pb-m-1 {
        padding-bottom: clamp(0.8em, 1vw, 1em);
    }
    .pb-m-2 {
        padding-bottom: clamp(1.2em, 2vw, 2em);
    }
    .pb-m-3 {
        padding-bottom: clamp(1.6em, 3vw, 3em);
    }
    .pb-m-4 {
        padding-bottom: clamp(2em, 4vw, 4em);
    }
    .pb-m-5 {
        padding-bottom: clamp(2.4em, 5vw, 5em);
    }
    .pb-m-6 {
        padding-bottom: clamp(2.8em, 6vw, 6em);
    }
    .pb-m-7 {
        padding-bottom: clamp(3.2em, 7vw, 7em);
    }
    .pb-m-8 {
        padding-bottom: clamp(3.6em, 8vw, 8em);
    }
    .pb-m-9 {
        padding-bottom: clamp(4em, 9vw, 9em);
    }
    .pb-m-10 {
        padding-bottom: clamp(5em, 10vw, 10em);
    }
    .pb-m-11 {
        padding-bottom: clamp(5.4em, 11vw, 11em);
    }
    .pb-m-12 {
        padding-bottom: clamp(5.8em, 12vw, 12em);
    }
    .pb-m-13 {
        padding-bottom: clamp(6.2em, 13vw, 13em);
    }
    .pb-m-14 {
        padding-bottom: clamp(6.6em, 14vw, 14em);
    }
    .pb-m-15 {
        padding-bottom: clamp(7em, 15vw, 15em);
    }
    
    .pl-m-1 {
        padding-left: clamp(0.8em, 1vw, 1em);
    }
    .pl-m-2 {
        padding-left: clamp(1.2em, 2vw, 2em);
    }
    .pl-m-3 {
        padding-left: clamp(1.6em, 3vw, 3em);
    }
    .pl-m-4 {
        padding-left: clamp(2em, 4vw, 4em);
    }
    .pl-m-5 {
        padding-left: clamp(2.4em, 5vw, 5em);
    }
    .pl-m-6 {
        padding-left: clamp(2.8em, 6vw, 6em);
    }
    .pl-m-7 {
        padding-left: clamp(3.2em, 7vw, 7em);
    }
    .pl-m-8 {
        padding-left: clamp(3.6em, 8vw, 8em);
    }
    .pl-m-9 {
        padding-left: clamp(4em, 9vw, 9em);
    }
    .pl-m-10 {
        padding-left: clamp(5em, 10vw, 10em);
    }
    .pl-m-11 {
        padding-left: clamp(5.4em, 11vw, 11em);
    }
    .pl-m-12 {
        padding-left: clamp(5.8em, 12vw, 12em);
    }
    .pl-m-13 {
        padding-left: clamp(6.2em, 13vw, 13em);
    }
    .pl-m-14 {
        padding-left: clamp(6.6em, 14vw, 14em);
    }
    .pl-m-15 {
        padding-left: clamp(7em, 15vw, 15em);
    }
    
    .pr-m-1 {
        padding-right: clamp(0.8em, 1vw, 1em);
    }
    .pr-m-2 {
        padding-right: clamp(1.2em, 2vw, 2em);
    }
    .pr-m-3 {
        padding-right: clamp(1.6em, 3vw, 3em);
    }
    .pr-m-4 {
        padding-right: clamp(2em, 4vw, 4em);
    }
    .pr-m-5 {
        padding-right: clamp(2.4em, 5vw, 5em);
    }
    .pr-m-6 {
        padding-right: clamp(2.8em, 6vw, 6em);
    }
    .pr-m-7 {
        padding-right: clamp(3.2em, 7vw, 7em);
    }
    .pr-m-8 {
        padding-right: clamp(3.6em, 8vw, 8em);
    }
    .pr-m-9 {
        padding-right: clamp(4em, 9vw, 9em);
    }
    .pr-m-10 {
        padding-right: clamp(5em, 10vw, 10em);
    }
    .pr-m-11 {
        padding-right: clamp(5.4em, 11vw, 11em);
    }
    .pr-m-12 {
        padding-right: clamp(5.8em, 12vw, 12em);
    }
    .pr-m-13 {
        padding-right: clamp(6.2em, 13vw, 13em);
    }
    .pr-m-14 {
        padding-right: clamp(6.6em, 14vw, 14em);
    }
    .pr-m-15 {
        padding-right: clamp(7em, 15vw, 15em);
    }
}



/* SMALL S */


@media only screen and (max-width: 700px) { 
    
    
    .mt-s-1 {
        margin-top: clamp(0.8em, 2vw, 1em);
    }
    .mt-s-2 {
        margin-top: clamp(1.5em, 4vw, 2em);
    }
    .mt-s-3 {
        margin-top: clamp(1.8em, 6vw, 3em);
    }
    .mt-s-4 {
        margin-top: clamp(3em, 8vw, 4em);
    }
    .mt-s-5 {
        margin-top: clamp(3.5em, 10vw, 5em);
    }
    .mt-s-6 {
        margin-top: clamp(4em, 12vw, 6em);
    }
    .mt-s-7 {
        margin-top: clamp(4.8em, 14vw, 7em);
    }
    .mt-s-8 {
        margin-top: clamp(6em, 16vw, 8em);
    }
    .mt-s-9 {
        margin-top: clamp(7em, 18vw, 9em);
    }
    .mt-s-10 {
        margin-top: clamp(8em, 20vw, 10em);
    }
    
    .mb-s-1 {
        margin-bottom: clamp(0.8em, 2vw, 1em);
    }
    .mb-s-2 {
        margin-bottom: clamp(1.5em, 4vw, 2em);
    }
    .mb-s-3 {
        margin-bottom: clamp(1.8em, 6vw, 3em);
    }
    .mb-s-4 {
        margin-bottom: clamp(3em, 8vw, 4em);
    }
    .mb-s-5 {
        margin-bottom: clamp(3.5em, 10vw, 5em);
    }
    .mb-s-6 {
        margin-bottom: clamp(4em, 12vw, 6em);
    }
    .mb-s-7 {
        margin-bottom: clamp(4.8em, 14vw, 7em);
    }
    .mb-s-8 {
        margin-bottom: clamp(6em, 16vw, 8em);
    }
    .mb-s-9 {
        margin-bottom: clamp(7em, 18vw, 9em);
    }
    .mb-s-10 {
        margin-bottom: clamp(8em, 20vw, 10em);
    }
    
    .ml-s-1 {
        margin-left: clamp(0.8em, 2vw, 1em);
    }
    .ml-s-2 {
        margin-left: clamp(1.5em, 4vw, 2em);
    }
    .ml-s-3 {
        margin-left: clamp(1.8em, 6vw, 3em);
    }
    .ml-s-4 {
        margin-left: clamp(3em, 8vw, 4em);
    }
    .ml-s-5 {
        margin-left: clamp(3.5em, 10vw, 5em);
    }
    .ml-s-6 {
        margin-left: clamp(4em, 12vw, 6em);
    }
    .ml-s-7 {
        margin-left: clamp(4.8em, 14vw, 7em);
    }
    .ml-s-8 {
        margin-left: clamp(6em, 16vw, 8em);
    }
    .ml-s-9 {
        margin-left: clamp(7em, 18vw, 9em);
    }
    .ml-s-10 {
        margin-left: clamp(8em, 20vw, 10em);
    }
    
    .mr-s-1 {
        margin-right: clamp(0.8em, 2vw, 1em);
    }
    .mr-s-2 {
        margin-right: clamp(1.5em, 4vw, 2em);
    }
    .mr-s-3 {
        margin-right: clamp(1.8em, 6vw, 3em);
    }
    .mr-s-4 {
        margin-right: clamp(3em, 8vw, 4em);
    }
    .mr-s-5 {
        margin-right: clamp(3.5em, 10vw, 5em);
    }
    .mr-s-6 {
        margin-right: clamp(4em, 12vw, 6em);
    }
    .mr-s-7 {
        margin-right: clamp(4.8em, 14vw, 7em);
    }
    .mr-s-8 {
        margin-right: clamp(6em, 16vw, 8em);
    }
    .mr-s-9 {
        margin-right: clamp(7em, 18vw, 9em);
    }
    .mr-s-10 {
        margin-right: clamp(8em, 20vw, 10em);
    }
    
    
    
    .pt-s-1 {
        padding-top: clamp(0.8em, 2vw, 1em);
    }
    .pt-s-2 {
        padding-top: clamp(1.5em, 4vw, 2em);
    }
    .pt-s-3 {
        padding-top: clamp(1.8em, 6vw, 3em);
    }
    .pt-s-4 {
        padding-top: clamp(3em, 8vw, 4em);
    }
    .pt-s-5 {
        padding-top: clamp(3.5em, 10vw, 5em);
    }
    .pt-s-6 {
        padding-top: clamp(4em, 12vw, 6em);
    }
    .pt-s-7 {
        padding-top: clamp(4.8em, 14vw, 7em);
    }
    .pt-s-8 {
        padding-top: clamp(6em, 16vw, 8em);
    }
    .pt-s-9 {
        padding-top: clamp(7em, 18vw, 9em);
    }
    .pt-s-10 {
        padding-top: clamp(8em, 20vw, 10em);
    }
    
    .pb-s-1 {
        padding-bottom: clamp(0.8em, 2vw, 1em);
    }
    .pb-s-2 {
        padding-bottom: clamp(1.5em, 4vw, 2em);
    }
    .pb-s-3 {
        padding-bottom: clamp(1.8em, 6vw, 3em);
    }
    .pb-s-4 {
        padding-bottom: clamp(3em, 8vw, 4em);
    }
    .pb-s-5 {
        padding-bottom: clamp(3.5em, 10vw, 5em);
    }
    .pb-s-6 {
        padding-bottom: clamp(4em, 12vw, 6em);
    }
    .pb-s-7 {
        padding-bottom: clamp(4.8em, 14vw, 7em);
    }
    .pb-s-8 {
        padding-bottom: clamp(6em, 16vw, 8em);
    }
    .pb-s-9 {
        padding-bottom: clamp(7em, 18vw, 9em);
    }
    .pb-s-10 {
        padding-bottom: clamp(8em, 20vw, 10em);
    }
    
    .pl-s-1 {
        padding-left: clamp(0.8em, 2vw, 1em);
    }
    .pl-s-2 {
        padding-left: clamp(1.5em, 4vw, 2em);
    }
    .pl-s-3 {
        padding-left: clamp(1.8em, 6vw, 3em);
    }
    .pl-s-4 {
        padding-left: clamp(3em, 8vw, 4em);
    }
    .pl-s-5 {
        padding-left: clamp(3.5em, 10vw, 5em);
    }
    .pl-s-6 {
        padding-left: clamp(4em, 12vw, 6em);
    }
    .pl-s-7 {
        padding-left: clamp(4.8em, 14vw, 7em);
    }
    .pl-s-8 {
        padding-left: clamp(6em, 16vw, 8em);
    }
    .pl-s-9 {
        padding-left: clamp(7em, 18vw, 9em);
    }
    .pl-s-10 {
        padding-left: clamp(8em, 20vw, 10em);
    }
    
    .pr-s-1 {
        padding-right: clamp(0.8em, 2vw, 1em);
    }
    .pr-s-2 {
        padding-right: clamp(1.5em, 4vw, 2em);
    }
    .pr-s-3 {
        padding-right: clamp(1.8em, 6vw, 3em);
    }
    .pr-s-4 {
        padding-right: clamp(3em, 8vw, 4em);
    }
    .pr-s-5 {
        padding-right: clamp(3.5em, 10vw, 5em);
    }
    .pr-s-6 {
        padding-right: clamp(4em, 12vw, 6em);
    }
    .pr-s-7 {
        padding-right: clamp(4.8em, 14vw, 7em);
    }
    .pr-s-8 {
        padding-right: clamp(6em, 16vw, 8em);
    }
    .pr-s-9 {
        padding-right: clamp(7em, 18vw, 9em);
    }
    .pr-s-10 {
        padding-right: clamp(8em, 20vw, 10em);
    }
}




/* EXTRA SMALL XS */

@media only screen and (max-width: 450px) {
 
    .mt-xs-1 {
        margin-top: clamp(0.8em, 2vw, 1em);
    }
    .mt-xs-2 {
        margin-top: clamp(1.5em, 4vw, 2em);
    }
    .mt-xs-3 {
        margin-top: clamp(1.8em, 6vw, 3em);
    }
    .mt-xs-4 {
        margin-top: clamp(3em, 8vw, 4em);
    }
    .mt-xs-5 {
        margin-top: clamp(3.5em, 10vw, 5em);
    }
    .mt-xs-6 {
        margin-top: clamp(4em, 12vw, 6em);
    }
    .mt-xs-7 {
        margin-top: clamp(4.8em, 14vw, 7em);
    }
    .mt-xs-8 {
        margin-top: clamp(6em, 16vw, 8em);
    }
    .mt-xs-9 {
        margin-top: clamp(7em, 18vw, 9em);
    }
    .mt-xs-10 {
        margin-top: clamp(8em, 20vw, 10em);
    }
    
    .mb-xs-1 {
        margin-bottom: clamp(0.8em, 2vw, 1em);
    }
    .mb-xs-2 {
        margin-bottom: clamp(1.5em, 4vw, 2em);
    }
    .mb-xs-3 {
        margin-bottom: clamp(1.8em, 6vw, 3em);
    }
    .mb-xs-4 {
        margin-bottom: clamp(3em, 8vw, 4em);
    }
    .mb-xs-5 {
        margin-bottom: clamp(3.5em, 10vw, 5em);
    }
    .mb-xs-6 {
        margin-bottom: clamp(4em, 12vw, 6em);
    }
    .mb-xs-7 {
        margin-bottom: clamp(4.8em, 14vw, 7em);
    }
    .mb-xs-8 {
        margin-bottom: clamp(6em, 16vw, 8em);
    }
    .mb-xs-9 {
        margin-bottom: clamp(7em, 18vw, 9em);
    }
    .mb-xs-10 {
        margin-bottom: clamp(8em, 20vw, 10em);
    }
    
    .ml-xs-1 {
        margin-left: clamp(0.8em, 2vw, 1em);
    }
    .ml-xs-2 {
        margin-left: clamp(1.5em, 4vw, 2em);
    }
    .ml-xs-3 {
        margin-left: clamp(1.8em, 6vw, 3em);
    }
    .ml-xs-4 {
        margin-left: clamp(3em, 8vw, 4em);
    }
    .ml-xs-5 {
        margin-left: clamp(3.5em, 10vw, 5em);
    }
    .ml-xs-6 {
        margin-left: clamp(4em, 12vw, 6em);
    }
    .ml-xs-7 {
        margin-left: clamp(4.8em, 14vw, 7em);
    }
    .ml-xs-8 {
        margin-left: clamp(6em, 16vw, 8em);
    }
    .ml-xs-9 {
        margin-left: clamp(7em, 18vw, 9em);
    }
    .ml-xs-10 {
        margin-left: clamp(8em, 20vw, 10em);
    }
    
    .mr-xs-1 {
        margin-right: clamp(0.8em, 2vw, 1em);
    }
    .mr-xs-2 {
        margin-right: clamp(1.5em, 4vw, 2em);
    }
    .mr-xs-3 {
        margin-right: clamp(1.8em, 6vw, 3em);
    }
    .mr-xs-4 {
        margin-right: clamp(3em, 8vw, 4em);
    }
    .mr-xs-5 {
        margin-right: clamp(3.5em, 10vw, 5em);
    }
    .mr-xs-6 {
        margin-right: clamp(4em, 12vw, 6em);
    }
    .mr-xs-7 {
        margin-right: clamp(4.8em, 14vw, 7em);
    }
    .mr-xs-8 {
        margin-right: clamp(6em, 16vw, 8em);
    }
    .mr-xs-9 {
        margin-right: clamp(7em, 18vw, 9em);
    }
    .mr-xs-10 {
        margin-right: clamp(8em, 20vw, 10em);
    }
    
    
    
    .pt-xs-1 {
        padding-top: clamp(0.8em, 2vw, 1em);
    }
    .pt-xs-2 {
        padding-top: clamp(1.5em, 4vw, 2em);
    }
    .pt-xs-3 {
        padding-top: clamp(1.8em, 6vw, 3em);
    }
    .pt-xs-4 {
        padding-top: clamp(3em, 8vw, 4em);
    }
    .pt-xs-5 {
        padding-top: clamp(3.5em, 10vw, 5em);
    }
    .pt-xs-6 {
        padding-top: clamp(4em, 12vw, 6em);
    }
    .pt-xs-7 {
        padding-top: clamp(4.8em, 14vw, 7em);
    }
    .pt-xs-8 {
        padding-top: clamp(6em, 16vw, 8em);
    }
    .pt-xs-9 {
        padding-top: clamp(7em, 18vw, 9em);
    }
    .pt-xs-10 {
        padding-top: clamp(8em, 20vw, 10em);
    }
    
    .pb-xs-1 {
        padding-bottom: clamp(0.8em, 2vw, 1em);
    }
    .pb-xs-2 {
        padding-bottom: clamp(1.5em, 4vw, 2em);
    }
    .pb-xs-3 {
        padding-bottom: clamp(1.8em, 6vw, 3em);
    }
    .pb-xs-4 {
        padding-bottom: clamp(3em, 8vw, 4em);
    }
    .pb-xs-5 {
        padding-bottom: clamp(3.5em, 10vw, 5em);
    }
    .pb-xs-6 {
        padding-bottom: clamp(4em, 12vw, 6em);
    }
    .pb-xs-7 {
        padding-bottom: clamp(4.8em, 14vw, 7em);
    }
    .pb-xs-8 {
        padding-bottom: clamp(6em, 16vw, 8em);
    }
    .pb-xs-9 {
        padding-bottom: clamp(7em, 18vw, 9em);
    }
    .pb-xs-10 {
        padding-bottom: clamp(8em, 20vw, 10em);
    }
    
    .pl-xs-1 {
        padding-left: clamp(0.8em, 2vw, 1em);
    }
    .pl-xs-2 {
        padding-left: clamp(1.5em, 4vw, 2em);
    }
    .pl-xs-3 {
        padding-left: clamp(1.8em, 6vw, 3em);
    }
    .pl-xs-4 {
        padding-left: clamp(3em, 8vw, 4em);
    }
    .pl-xs-5 {
        padding-left: clamp(3.5em, 10vw, 5em);
    }
    .pl-xs-6 {
        padding-left: clamp(4em, 12vw, 6em);
    }
    .pl-xs-7 {
        padding-left: clamp(4.8em, 14vw, 7em);
    }
    .pl-xs-8 {
        padding-left: clamp(6em, 16vw, 8em);
    }
    .pl-xs-9 {
        padding-left: clamp(7em, 18vw, 9em);
    }
    .pl-xs-10 {
        padding-left: clamp(8em, 20vw, 10em);
    }
    
    .pr-xs-1 {
        padding-right: clamp(0.8em, 2vw, 1em);
    }
    .pr-xs-2 {
        padding-right: clamp(1.5em, 4vw, 2em);
    }
    .pr-xs-3 {
        padding-right: clamp(1.8em, 6vw, 3em);
    }
    .pr-xs-4 {
        padding-right: clamp(3em, 8vw, 4em);
    }
    .pr-xs-5 {
        padding-right: clamp(3.5em, 10vw, 5em);
    }
    .pr-xs-6 {
        padding-right: clamp(4em, 12vw, 6em);
    }
    .pr-xs-7 {
        padding-right: clamp(4.8em, 14vw, 7em);
    }
    .pr-xs-8 {
        padding-right: clamp(6em, 16vw, 8em);
    }
    .pr-xs-9 {
        padding-right: clamp(7em, 18vw, 9em);
    }
    .pr-xs-10 {
        padding-right: clamp(8em, 20vw, 10em);
    }
}




/*------------------------------------------------------------------------------------------------------------------------------
                                                        5 POSITIONING
------------------------------------------------------------------------------------------------------------------------------*/

/* /////////// BREAKPOINTS ///////////

1100px = L
 900px = M
 700px = S
 450px = XS

/////////// */




/* POSITIONING */


.center {
    justify-items: center;
    align-items: center;
    display: grid;
}

.center-left {
    justify-items: left;
    align-items: center;
    display: grid;
}

.center-right {
    justify-items: right;
    align-items: center;
    display: grid;
}

.top-left {
    justify-items: left;
    align-items: start;
    display: grid;
}

.top-center {
    justify-items: center;
    align-items: start;
    display: grid;
}

.top-right {
    justify-items: right;
    align-items: start;
    display: grid;
}

.bottom-left {
    justify-items: left;
    align-items: end;
    display: grid;
}

.bottom-center {
    justify-items: center;
    align-items: end;
    display: grid;
}

.bottom-right {
    justify-items: right;
    align-items: end;
    display: grid;
}



/* LARGE L */

@media only screen and (max-width: 1100px) {  
    .center-l {
        justify-items: center;
        align-items: center;
        display: grid;
    }
    
    .center-left-l {
        justify-items: left;
        align-items: center;
        display: grid;
    }
    
    .center-right-l {
        justify-items: right;
        align-items: center;
        display: grid;
    }
    
    .top-left-l {
        justify-items: left;
        align-items: start;
        display: grid;
    }
    
    .top-center-l {
        justify-items: center;
        align-items: start;
        display: grid;
    }
    
    .top-right-l {
        justify-items: right;
        align-items: start;
        display: grid;
    }
    
    .bottom-left-l {
        justify-items: left;
        align-items: end;
        display: grid;
    }
    
    .bottom-center-l {
        justify-items: center;
        align-items: end;
        display: grid;
    }
    
    .bottom-right-l {
        justify-items: right;
        align-items: end;
        display: grid;
    }
}


/* MEDIUM M */

@media only screen and (max-width: 900px) {  
    .center-m {
        justify-items: center;
        align-items: center;
        display: grid;
    }
    
    .center-left-m {
        justify-items: left;
        align-items: center;
        display: grid;
    }
    
    .center-right-m {
        justify-items: right;
        align-items: center;
        display: grid;
    }
    
    .top-left-m {
        justify-items: left;
        align-items: start;
        display: grid;
    }
    
    .top-center-m {
        justify-items: center;
        align-items: start;
        display: grid;
    }
    
    .top-right-m {
        justify-items: right;
        align-items: start;
        display: grid;
    }
    
    .bottom-left-m {
        justify-items: left;
        align-items: end;
        display: grid;
    }
    
    .bottom-center-m {
        justify-items: center;
        align-items: end;
        display: grid;
    }
    
    .bottom-right-m {
        justify-items: right;
        align-items: end;
        display: grid;
    }
}


/* SMALL S */

@media only screen and (max-width: 700px) {  
    .center-s {
        justify-items: center;
        align-items: center;
        display: grid;
    }
    
    .center-left-s {
        justify-items: left;
        align-items: center;
        display: grid;
    }
    
    .center-right-s {
        justify-items: right;
        align-items: center;
        display: grid;
    }
    
    .top-left-s {
        justify-items: left;
        align-items: start;
        display: grid;
    }
    
    .top-center-s {
        justify-items: center;
        align-items: start;
        display: grid;
    }
    
    .top-right-s {
        justify-items: right;
        align-items: start;
        display: grid;
    }
    
    .bottom-left-s {
        justify-items: left;
        align-items: end;
        display: grid;
    }
    
    .bottom-center-s {
        justify-items: center;
        align-items: end;
        display: grid;
    }
    
    .bottom-right-s {
        justify-items: right;
        align-items: end;
        display: grid;
    }
}


/* EXTRA SMALL XS */

@media only screen and (max-width: 450px) {  
    .center-xs {
        justify-items: center;
        align-items: center;
        display: grid;
    }
    
    .center-left-xs {
        justify-items: left;
        align-items: center;
        display: grid;
    }
    
    .center-right-xs {
        justify-items: right;
        align-items: center;
        display: grid;
    }
    
    .top-left-xs {
        justify-items: left;
        align-items: start;
        display: grid;
    }
    
    .top-center-xs {
        justify-items: center;
        align-items: start;
        display: grid;
    }
    
    .top-right-xs {
        justify-items: right;
        align-items: start;
        display: grid;
    }
    
    .bottom-left-xs {
        justify-items: left;
        align-items: end;
        display: grid;
    }
    
    .bottom-center-xs {
        justify-items: center;
        align-items: end;
        display: grid;
    }
    
    .bottom-right-xs {
        justify-items: right;
        align-items: end;
        display: grid;
    }
}




/*------------------------------------------------------------------------------------------------------------------------------
                                                        6 TEXT AUSRICHTUNG (Text align)
------------------------------------------------------------------------------------------------------------------------------*/

.lefttext p, .lefttext a, .lefttext h1, .lefttext h2, .lefttext h3, .lefttext h4, .lefttext h5 {
    text-align: left;
}

.righttext p, .righttext a, .righttext h1, .righttext h2, .righttext h3, .righttext h4, .righttext h5 {
    text-align: right;
}

.centertext p, .centertext a, .centertext h1, .centertext h2, .centertext h3, .centertext h4, .centertext h5 {
    text-align: center;
}

.justifytext p, .justifytext a, .justifytext h1, .justifytext h2, .justifytext h3, .justifytext h4, .justifytext h5 {
    text-align: justify;
}

@media only screen and (max-width: 1100px) {  

    .lefttext-l p, .lefttext-l a, .lefttext-l h1, .lefttext-l h2, .lefttext-l h3, .lefttext-l h4, .lefttext-l h5 {
        text-align: left;
    }
    
    .righttext-l p, .righttext-l a, .righttext-l h1, .righttext-l h2, .righttext-l h3, .righttext-l h4, .righttext-l h5 {
        text-align: right;
    }
    
    .centertext-l p, .centertext-l a, .centertext-l h1, .centertext-l h2, .centertext-l h3, .centertext-l h4, .centertext-l h5 {
        text-align: center;
    }
    
    .justifytext-l p, .justifytext-l a, .justifytext-l h1, .justifytext-l h2, .justifytext-l h3, .justifytext-l h4, .justifytext-l h5 {
        text-align: justify;
    }
}

@media only screen and (max-width: 900px) {  

    .lefttext-m p, .lefttext-m a, .lefttext-m h1, .lefttext-m h2, .lefttext-m h3, .lefttext-m h4, .lefttext-m h5 {
        text-align: left;
    }
    
    .righttext-m p, .righttext-m a, .righttext-m h1, .righttext-m h2, .righttext-m h3, .righttext-m h4, .righttext-m h5 {
        text-align: right;
    }
    
    .centertext-m p, .centertext-m a, .centertext-m h1, .centertext-m h2, .centertext-m h3, .centertext-m h4, .centertext-m h5 {
        text-align: center;
    }
    
    .justifytext-m p, .justifytext-m a, .justifytext-m h1, .justifytext-m h2, .justifytext-m h3, .justifytext-m h4, .justifytext-m h5 {
        text-align: justify;
    }
}

@media only screen and (max-width: 700px) {  

    .lefttext-s p, .lefttext-s a, .lefttext-s h1, .lefttext-s h2, .lefttext-s h3, .lefttext-s h4, .lefttext-s h5 {
        text-align: left;
    }
    
    .righttext-s p, .righttext-s a, .righttext-s h1, .righttext-s h2, .righttext-s h3, .righttext-s h4, .righttext-s h5 {
        text-align: right;
    }
    
    .centertext-s p, .centertext-s a, .centertext-s h1, .centertext-s h2, .centertext-s h3, .centertext-s h4, .centertext-s h5 {
        text-align: center;
    }
    
    .justifytext-s p, .justifytext-s a, .justifytext-s h1, .justifytext-s h2, .justifytext-s h3, .justifytext-s h4, .justifytext-s h5 {
        text-align: justify;
    }
}

@media only screen and (max-width: 450px) {  

    .lefttext-xs p, .lefttext-xs a, .lefttext-xs h1, .lefttext-xs h2, .lefttext-xs h3, .lefttext-xs h4, .lefttext-xs h5 {
        text-align: left;
    }
    
    .righttext-xs p, .righttext-xs a, .righttext-xs h1, .righttext-xs h2, .righttext-xs h3, .righttext-xs h4, .righttext-xs h5 {
        text-align: right;
    }
    
    .centertext-xs p, .centertext-xs a, .centertext-xs h1, .centertext-xs h2, .centertext-xs h3, .centertext-xs h4, .centertext-xs h5 {
        text-align: center;
    }
    
    .justifytext-xs p, .justifytext-xs a, .justifytext-xs h1, .justifytext-xs h2, .justifytext-xs h3, .justifytext-xs h4, .justifytext-xs h5 {
        text-align: justify;
    }
}
  
  


  
/*------------------------------------------------------------------------------------------------------------------------------
                                                        7 HAUPT-CONTAINER
------------------------------------------------------------------------------------------------------------------------------*/
  

/* /////////// BEZEICHNUNG ///////////

Container mit kleiner Breite = containerS
Container mit schmaler Breite = containerT
Container mit Seiten-Standard Paddings = containerP
Container mit Seiten-Standard Margins = containerM
Container mit limitierter Breite = containerB

/////////// */



  #containerS {
    position: relative;
    display: inline;
    float: left;
    width: 50%!important;
    padding-left: 25%;
    padding-right: 25%;
  }
  
  #containerM {
    position: relative;
    display: inline;
    float: left;
    width: 86%;
    margin-left: 7%;
    margin-right: 7%;
}
  
  #containerP {
    position: relative;
    display: inline;
    float: left;
    width: 86%;
    padding-left: 7%;
    padding-right: 7%;
    z-index: 2;
  }

  
  #containerT {
    position: relative;
    display: inline;
    float: left;
    width: 72%;
    padding-left: 14%;
    padding-right: 14%;
    z-index: 2;
  }





/* ===================================== CONTAINER RESPONSIVE ===================================== */

@media only screen and (min-width: 2000px) {  
    #containerB {
        position: relative;
        display: grid;
        width: 100%;
        /*padding: 0;*/
        margin: 0 auto;
        max-width: 2000px;
    }
}


@media only screen and (max-width: 1500px) {  
    #containerS {
        width: 60%!important;
        padding-left: 20%;
        padding-right: 20%;
    }

}
  

@media only screen and (max-width: 900px) {  

    #containerT {
        width: 70%;
        padding-left: 15%;
        padding-right: 15%;
    }

}


@media only screen and (max-width: 500px) {   
   
    #containerP {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }

    #containerM {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    #containerS {
        width: 80%!important;
        padding-left: 10%;
        padding-right: 10%;
    }
    #containerT {
        width: 86%;
        padding-left: 7%;
        padding-right: 7%;
    }
}