/*------------------

██    ██ ██████  ██  ██████       ██████ ███████ ███████      ██████  ██████  ██ ██████  
██    ██ ██   ██ ██ ██    ██     ██      ██      ██          ██       ██   ██ ██ ██   ██ 
██    ██ ██████  ██ ██    ██     ██      ███████ ███████     ██   ███ ██████  ██ ██   ██ 
██    ██ ██   ██ ██ ██ ▄▄ ██     ██           ██      ██     ██    ██ ██   ██ ██ ██   ██ 
 ██████  ██████  ██  ██████       ██████ ███████ ███████      ██████  ██   ██ ██ ██████  
                        ▀▀                                                               
                                                                                         
 ANSI REGULAR
 
 
 VERSION 2.07
    - alle Margins und Paddings auf 30 erweitert

 VERSION 2.06
    - Neu standardmässig auto rows und equal columns (Gleiche Spalten: standard / ungleiche reihen: standard / ungleiche Spalten .grid.cols-1-auto / gleiche Reihen: .grid.rows-1-equal)

 VERSION 2.05
    - Neu mit p-0 etc. und m-0 etc.
    
 VERSION 2.04
    - Neue Struktur der Container (Boxed Layout)
    - Neu mit XL
    - XXS vollständig
    - Responsive Auto Rows

 VERSION 2.03
    - mt, pt, mb, pb responsive bis 20
    - cols-0, rows-0 display none

 VERSION 2.02                                                                            
    - Neu mit XXS (noch nicht fertig)
    



/* /////////// INHALT ///////////

1. HAUPT-CONTAINER (#containerM, #containerP etc.)
2. GRID Container
3. REIHEN / SPALTEN
4. GAPS
5. SPACINGS (Margins & Paddings)
6. POSITIONING (Ausrichtung top-left, top-right, center-left usw. )
7. TEXT AUSRICHTUNG (left-text, right-text, center-text, justify-text)

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





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

1300px = XL
1100px = L
 900px = M
 700px = S
 500px = XS / iPhone13
 330px = XXS / iPhone5

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



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

/* SAME ROW HEIGHTS FOR ALL */
.grid.equalrow {
	grid-auto-rows: 1fr;
}

.grid.equalcolumn {
	grid-auto-columns: 1fr;
}

.grid.line {
    border-bottom: solid 1px var(--blue);
    padding: 1em 0 1em;
}









/*------------------------------------------------------------------------------------------------------------------------------
                                                        1 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

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

#container {
    position: relative;
    width: calc(100% - clamp(2em, 4vw, 4em));
    margin-left: clamp(1em, 2vw, 2em);
    margin-right: clamp(1em, 2vw, 2em);
}

#boxed {
    position: relative;
    width: 100%;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}

#small {
    position: relative;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

#medium {
    position: relative;
    width: 86%;
    margin-left: auto;
    margin-right: auto;
}

#wide {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

/* SWIPER overflow visible -> .swiper1 {overflow:visible} and .overflow-hidden to the section#container */

.desktop {
    display: block;
}
  
.mobile {
    display: none;
}



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

@media only screen and (min-width: 2500px) {  

}


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




/* EXTRA LARGE XL */

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

    .overflow-hidden-xl {
        overflow: hidden;
    }

    .overflow-visible-xl {
        overflow: visible;
    }

}
  

/* LARGE L */

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

    #medium {
        width: 92%;
    }

    .overflow-hidden-l {
        overflow: hidden;
    }

    .overflow-visible-l {
        overflow: visible;
    }

}


/* MEDIUM M */

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

    #container.floating-right-m {
        width: calc(100% - clamp(20px, 2vw, 2em));
        margin-left: clamp(20px, 2vw, 2em);
        margin-right: 0;
    }

    .overflow-hidden-m {
        overflow: hidden;
    }

    .overflow-visible-m {
        overflow: visible;
    }

}


/* SMALL S */

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


    #medium {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    #small {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #wide {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .desktop {
        display: none;
    }
      
    .mobile {
        display: block;
    }

    .overflow-hidden-s {
        overflow: hidden;
    }

    .overflow-visible-s {
        overflow: visible;
    }

}


/* EXTRA SMALL XS */

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


    #medium {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    #small {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #wide {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .desktop {
        display: none;
    }
      
    .mobile {
        display: block;
    }

    .overflow-hidden-xs {
        overflow: hidden;
    }

    .overflow-visible-xs {
        overflow: visible;
    }

}




/* EXTRA EXTRA SMALL XXS */

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

    .overflow-hidden-xxs {
        overflow: hidden;
    }

    .overflow-visible-xxs {
        overflow: visible;
    }

}






/*------------------------------------------------------------------------------------------------------------------------------
                                                        2 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.cols-1-auto {
    grid-template-columns: repeat(1, auto);
  }
  .grid.cols-2-auto {
    grid-template-columns: repeat(2, auto);
  }
  .grid.cols-3-auto {
    grid-template-columns: repeat(3, auto);
  }
  .grid.cols-4-auto {
    grid-template-columns: repeat(4, auto);
  }
  .grid.cols-5-auto {
    grid-template-columns: repeat(5, auto);
  }
  .grid.cols-6-auto {
    grid-template-columns: repeat(6, auto);
  }
  .grid.cols-7-auto {
    grid-template-columns: repeat(7, auto);
  }
  .grid.cols-8-auto {
    grid-template-columns: repeat(8, auto);
  }
  .grid.cols-9-auto {
    grid-template-columns: repeat(9, auto);
  }
  .grid.cols-10-auto {
    grid-template-columns: repeat(10, auto);
  }
  .grid.cols-11-auto {
    grid-template-columns: repeat(11, auto);
  }
  .grid.cols-12-auto {
    grid-template-columns: repeat(12, auto);
  }


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


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


  .grid.cols-2.same-width {
    grid-template-columns: repeat(2, 50%);
  }


/*------------------------------------------------------------------------------------------------------------------------------
                                                        3 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 ===================================== */


/* EXTRA LARGE XL */

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


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

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

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

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


    /* Columns */

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


    /* Rows */

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



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

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


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

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

}


/* 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.cols-l-1-auto {
        grid-template-columns: repeat(1, auto);
    }
    .grid.cols-l-2-auto {
        grid-template-columns: repeat(2, auto);
    }
    .grid.cols-l-3-auto {
        grid-template-columns: repeat(3, auto);
    }
    .grid.cols-l-4-auto {
        grid-template-columns: repeat(4, auto);
    }
    .grid.cols-l-5-auto {
        grid-template-columns: repeat(5, auto);
    }
    .grid.cols-l-6-auto {
        grid-template-columns: repeat(6, auto);
    }
    .grid.cols-l-7-auto {
        grid-template-columns: repeat(7, auto);
    }
    .grid.cols-l-8-auto {
        grid-template-columns: repeat(8, auto);
    }
    .grid.cols-l--9-auto {
        grid-template-columns: repeat(9, auto);
    }
    .grid.cols-l-10-auto {
        grid-template-columns: repeat(10, auto);
    }
    .grid.cols-l-11-auto {
        grid-template-columns: repeat(11, auto);
    }
    .grid.cols-l-12-auto {
        grid-template-columns: repeat(12, auto);
    }

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

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



/* Columns */

    .col-l-0 {
        display: none;
    }
    .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-0 {
        display: none;
    }
    .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-m-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.cols-m-1-auto {
        grid-template-columns: repeat(1, auto);
    }
    .grid.cols-m-2-auto {
        grid-template-columns: repeat(2, auto);
    }
    .grid.cols-m-3-auto {
        grid-template-columns: repeat(3, auto);
    }
    .grid.cols-m-4-auto {
        grid-template-columns: repeat(4, auto);
    }
    .grid.cols-m-5-auto {
        grid-template-columns: repeat(5, auto);
    }
    .grid.cols-m-6-auto {
        grid-template-columns: repeat(6, auto);
    }
    .grid.cols-m-7-auto {
        grid-template-columns: repeat(7, auto);
    }
    .grid.cols-m-8-auto {
        grid-template-columns: repeat(8, auto);
    }
    .grid.cols-m--9-auto {
        grid-template-columns: repeat(9, auto);
    }
    .grid.cols-m-10-auto {
        grid-template-columns: repeat(10, auto);
    }
    .grid.cols-m-11-auto {
        grid-template-columns: repeat(11, auto);
    }
    .grid.cols-m-12-auto {
        grid-template-columns: repeat(12, auto);
    }

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

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



/* Columns */

    .col-m-0 {
        display: none;
    }
    .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-0 {
        display: none;
    }
    .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.cols-s-1-auto {
        grid-template-columns: repeat(1, auto);
        }
        .grid.cols-s-2-auto {
            grid-template-columns: repeat(2, auto);
        }
        .grid.cols-s-3-auto {
            grid-template-columns: repeat(3, auto);
        }
        .grid.cols-s-4-auto {
            grid-template-columns: repeat(4, auto);
        }
        .grid.cols-s-5-auto {
            grid-template-columns: repeat(5, auto);
        }
        .grid.cols-s-6-auto {
            grid-template-columns: repeat(6, auto);
        }
        .grid.cols-s-7-auto {
            grid-template-columns: repeat(7, auto);
        }
        .grid.cols-s-8-auto {
            grid-template-columns: repeat(8, auto);
        }
        .grid.cols-s-9-auto {
            grid-template-columns: repeat(9, auto);
        }
        .grid.cols-s-10-auto {
            grid-template-columns: repeat(10, auto);
        }
        .grid.cols-s-11-auto {
            grid-template-columns: repeat(11, auto);
        }
        .grid.cols-s-12-auto {
            grid-template-columns: repeat(12, auto);
        }

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

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


/* Columns */

    .col-s-0 {
        display: none;
    }
    .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-0 {
        display: none;
    }
    .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: 500px) {  

    .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.cols-xs-1-auto {
        grid-template-columns: repeat(1, auto);
    }
    .grid.cols-xs-2-auto {
        grid-template-columns: repeat(2, auto);
    }
    .grid.cols-xs-3-auto {
        grid-template-columns: repeat(3, auto);
    }
    .grid.cols-xs-4-auto {
        grid-template-columns: repeat(4, auto);
    }
    .grid.cols-xs-5-auto {
        grid-template-columns: repeat(5, auto);
    }
    .grid.cols-xs-6-auto {
        grid-template-columns: repeat(6, auto);
    }
    .grid.cols-xs-7-auto {
        grid-template-columns: repeat(7, auto);
    }
    .grid.cols-xs-8-auto {
        grid-template-columns: repeat(8, auto);
    }
    .grid.cols-xs-9-auto {
        grid-template-columns: repeat(9, auto);
    }
    .grid.cols-xs-10-auto {
        grid-template-columns: repeat(10, auto);
    }
    .grid.cols-xs-11-auto {
        grid-template-columns: repeat(11, auto);
    }
    .grid.cols-xs-12-auto {
        grid-template-columns: repeat(12, auto);
    }

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

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

      

/* Columns */

    .col-xs-0 {
        display: none;
    }
    .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-0 {
        display: none;
    }
    .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;
    }

    

}




/* EXTRA SMALL XXS */

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

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

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

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

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

      

/* Columns */

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


    /* Rows */

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


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

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


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

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

    

}








/*------------------------------------------------------------------------------------------------------------------------------
                                                        4 GAPS
------------------------------------------------------------------------------------------------------------------------------*/
  
.row-gap-0 {
    row-gap: 0;
}
.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-0 {
    column-gap: 0;
}
.column-gap-1 {
    column-gap: clamp(0.4em, 1vw, 1em);
}
.column-gap-2 {
    column-gap: clamp(0.8em, 2vw, 2em);
}
.column-gap-3 {
    column-gap: clamp(1.4em, 3vw, 3em);
}
.column-gap-4 {
    column-gap: clamp(1.8em, 4vw, 4em);
}
.column-gap-5 {
    column-gap: clamp(2.2em, 5vw, 5em);
}
.column-gap-6 {
    column-gap: clamp(2.6em, 6vw, 6em);
}
.column-gap-7 {
    column-gap: clamp(3em, 7vw, 7em);
}
.column-gap-8 {
    column-gap: clamp(3.4em, 8vw, 8em);
}
.column-gap-9 {
    column-gap: clamp(3.8em, 9vw, 9em);
}
.column-gap-10 {
    column-gap: clamp(4.2em, 10vw, 10em);
}



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

1300px = L
1100px = L
900px = M
700px = S
500px = XS

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



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


/* EXTRA LARGE XL */

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

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

    .column-gap-xl-0 {
        column-gap: 0;
    }
    .column-gap-xl-1 {
        column-gap: clamp(0.4em, 1vw, 1em);
    }
    .column-gap-xl-2 {
        column-gap: clamp(0.8em, 2vw, 2em);
    }
    .column-gap-xl-3 {
        column-gap: clamp(1.4em, 3vw, 3em);
    }
    .column-gap-xl-4 {
        column-gap: clamp(1.8em, 4vw, 4em);
    }
    .column-gap-xl-5 {
        column-gap: clamp(2.2em, 5vw, 5em);
    }
    .column-gap-xl-6 {
        column-gap: clamp(2.6em, 6vw, 6em);
    }
    .column-gap-xl-7 {
        column-gap: clamp(3em, 7vw, 7em);
    }
    .column-gap-xl-8 {
        column-gap: clamp(3.4em, 8vw, 8em);
    }
    .column-gap-xl-9 {
        column-gap: clamp(3.8em, 9vw, 9em);
    }
    .column-gap-xl-10 {
        column-gap: clamp(4.2em, 10vw, 10em);
    }  

}


/* LARGE L */

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

    .row-gap-l-0 {
        row-gap: 0;
    }
    .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-0 {
        column-gap: 0;
    }
    .column-gap-l-1 {
        column-gap: clamp(0.4em, 1vw, 1em);
    }
    .column-gap-l-2 {
        column-gap: clamp(0.8em, 2vw, 2em);
    }
    .column-gap-l-3 {
        column-gap: clamp(1.4em, 3vw, 3em);
    }
    .column-gap-l-4 {
        column-gap: clamp(1.8em, 4vw, 4em);
    }
    .column-gap-l-5 {
        column-gap: clamp(2.2em, 5vw, 5em);
    }
    .column-gap-l-6 {
        column-gap: clamp(2.6em, 6vw, 6em);
    }
    .column-gap-l-7 {
        column-gap: clamp(3em, 7vw, 7em);
    }
    .column-gap-l-8 {
        column-gap: clamp(3.4em, 8vw, 8em);
    }
    .column-gap-l-9 {
        column-gap: clamp(3.8em, 9vw, 9em);
    }
    .column-gap-l-10 {
        column-gap: clamp(4.2em, 10vw, 10em);
    }  

}


/* MEDIUM M */

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

    .row-gap-m-0 {
        row-gap: 0;
    }
    .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-0 {
        column-gap: 0;
    }
    .column-gap-m-1 {
        column-gap: clamp(0.4em, 1vw, 1em);
    }
    .column-gap-m-2 {
        column-gap: clamp(0.8em, 2vw, 2em);
    }
    .column-gap-m-3 {
        column-gap: clamp(1.4em, 3vw, 3em);
    }
    .column-gap-m-4 {
        column-gap: clamp(1.8em, 4vw, 4em);
    }
    .column-gap-m-5 {
        column-gap: clamp(2.2em, 5vw, 5em);
    }
    .column-gap-m-6 {
        column-gap: clamp(2.6em, 6vw, 6em);
    }
    .column-gap-m-7 {
        column-gap: clamp(3em, 7vw, 7em);
    }
    .column-gap-m-8 {
        column-gap: clamp(3.4em, 8vw, 8em);
    }
    .column-gap-m-9 {
        column-gap: clamp(3.8em, 9vw, 9em);
    }
    .column-gap-m-10 {
        column-gap: clamp(4.2em, 10vw, 10em);
    }  

}


/* SMALL S */

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


    .row-gap-s-0 {
        row-gap: 0;
    }
    .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-0 {
        column-gap: 0;
    }
    .column-gap-s-1 {
        column-gap: clamp(0.4em, 1vw, 1em);
    }
    .column-gap-s-2 {
        column-gap: clamp(0.8em, 2vw, 2em);
    }
    .column-gap-s-3 {
        column-gap: clamp(1.4em, 3vw, 3em);
    }
    .column-gap-s-4 {
        column-gap: clamp(1.8em, 4vw, 4em);
    }
    .column-gap-s-5 {
        column-gap: clamp(2.2em, 5vw, 5em);
    }
    .column-gap-s-6 {
        column-gap: clamp(2.6em, 6vw, 6em);
    }
    .column-gap-s-7 {
        column-gap: clamp(3em, 7vw, 7em);
    }
    .column-gap-s-8 {
        column-gap: clamp(3.4em, 8vw, 8em);
    }
    .column-gap-s-9 {
        column-gap: clamp(3.8em, 9vw, 9em);
    }
    .column-gap-s-10 {
        column-gap: clamp(4.2em, 10vw, 10em);
    }  

}


/* EXTRA SMALL XS */

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

    .row-gap-xs-0 {
        row-gap: 0;
    }
    .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-0 {
        column-gap: 0;
    }
    .column-gap-xs-1 {
        column-gap: clamp(0.4em, 1vw, 1em);
    }
    .column-gap-xs-2 {
        column-gap: clamp(0.8em, 2vw, 2em);
    }
    .column-gap-xs-3 {
        column-gap: clamp(1.4em, 3vw, 3em);
    }
    .column-gap-xs-4 {
        column-gap: clamp(1.8em, 4vw, 4em);
    }
    .column-gap-xs-5 {
        column-gap: clamp(2.2em, 5vw, 5em);
    }
    .column-gap-xs-6 {
        column-gap: clamp(2.6em, 6vw, 6em);
    }
    .column-gap-xs-7 {
        column-gap: clamp(3em, 7vw, 7em);
    }
    .column-gap-xs-8 {
        column-gap: clamp(3.4em, 8vw, 8em);
    }
    .column-gap-xs-9 {
        column-gap: clamp(3.8em, 9vw, 9em);
    }
    .column-gap-xs-10 {
        column-gap: clamp(4.2em, 10vw, 10em);
    }  

}


/* EXTRA EXTRA SMALL XXS */

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

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

    .column-gap-xxs-0 {
        column-gap: 0;
    }
    .column-gap-xxs-1 {
        column-gap: clamp(0.4em, 1vw, 1em);
    }
    .column-gap-xxs-2 {
        column-gap: clamp(0.8em, 2vw, 2em);
    }
    .column-gap-xxs-3 {
        column-gap: clamp(1.4em, 3vw, 3em);
    }
    .column-gap-xxs-4 {
        column-gap: clamp(1.8em, 4vw, 4em);
    }
    .column-gap-xxs-5 {
        column-gap: clamp(2.2em, 5vw, 5em);
    }
    .column-gap-xxs-6 {
        column-gap: clamp(2.6em, 6vw, 6em);
    }
    .column-gap-xxs-7 {
        column-gap: clamp(3em, 7vw, 7em);
    }
    .column-gap-xxs-8 {
        column-gap: clamp(3.4em, 8vw, 8em);
    }
    .column-gap-xxs-9 {
        column-gap: clamp(3.8em, 9vw, 9em);
    }
    .column-gap-xxs-10 {
        column-gap: clamp(4.2em, 10vw, 10em);
    }  

}







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



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


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


.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 ================================ */


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


.pt-0 {
    padding-top: 0;
}
.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-0 {
    padding-bottom: 0;
}
.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-0 {
    padding-left: 0;
}
.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.5em, 11vw, 11em);
}
.pl-12 {
    padding-left: clamp(6em, 6vw, 6em);
}
.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-0 {
    padding-right: 0;
}
.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.5em, 11vw, 11em);
}
.pr-12 {
    padding-right: clamp(6em, 6vw, 6em);
}
.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 ///////////

1300px = XL
1100px = L
 900px = M
 700px = S
 500px = XS

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





/* EXTRA LARGE XL */

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


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


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

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



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



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



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





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


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

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



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



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



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


}




/* LARGE L */

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


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

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


    .mt-l-0 {
        margin-top: 0;
    }
    .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);
    }
    .mt-l-21 {
        margin-top: clamp(10.4em, 21vw, 21em);
    }
    .mt-l-22 {
        margin-top: clamp(10.8em, 22vw, 22em);
    }
    .mt-l-23 {
        margin-top: clamp(11.2em, 23vw, 23em);
    }
    .mt-l-24 {
        margin-top: clamp(11.6em, 24vw, 24em);
    }
    .mt-l-25 {
        margin-top: clamp(12em, 25vw, 25em);
    }
    .mt-l-26 {
        margin-top: clamp(12.4em, 26vw, 26em);
    }
    .mt-l-27 {
        margin-top: clamp(12.8em, 27vw, 27em);
    }
    .mt-l-28 {
        margin-top: clamp(13.2em, 28vw, 28em);
    }
    .mt-l-29 {
        margin-top: clamp(13.6em, 29vw, 29em);
    }
    .mt-l-30 {
        margin-top: clamp(15em, 30vw, 30em);
    }



    .mb-l-0 {
        margin-bottom: 0;
    }
    .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);
    }
    .mb-l-21 {
        margin-bottom: clamp(10.4em, 21vw, 21em);
    }
    .mb-l-22 {
        margin-bottom: clamp(10.8em, 22vw, 22em);
    }
    .mb-l-23 {
        margin-bottom: clamp(11.2em, 23vw, 23em);
    }
    .mb-l-24 {
        margin-bottom: clamp(11.6em, 24vw, 24em);
    }
    .mb-l-25 {
        margin-bottom: clamp(12em, 25vw, 25em);
    }
    .mb-l-26 {
        margin-bottom: clamp(12.4em, 26vw, 26em);
    }
    .mb-l-27 {
        margin-bottom: clamp(12.8em, 27vw, 27em);
    }
    .mb-l-28 {
        margin-bottom: clamp(13.2em, 28vw, 28em);
    }
    .mb-l-29 {
        margin-bottom: clamp(13.6em, 29vw, 29em);
    }
    .mb-l-30 {
        margin-bottom: clamp(15em, 30vw, 30em);
    }



    .ml-l-0 {
        margin-left: 0;
    }
    .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-xl-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);
    }
    .ml-l-21 {
        margin-left: clamp(10.4em, 21vw, 21em);
    }
    .ml-l-22 {
        margin-left: clamp(10.8em, 22vw, 22em);
    }
    .ml-l-23 {
        margin-left: clamp(11.2em, 23vw, 23em);
    }
    .ml-l-24 {
        margin-left: clamp(11.6em, 24vw, 24em);
    }
    .ml-l-25 {
        margin-left: clamp(12em, 25vw, 25em);
    }
    .ml-l-26 {
        margin-left: clamp(12.4em, 26vw, 26em);
    }
    .ml-l-27 {
        margin-left: clamp(12.8em, 27vw, 27em);
    }
    .ml-l-28 {
        margin-left: clamp(13.2em, 28vw, 28em);
    }
    .ml-l-29 {
        margin-left: clamp(13.6em, 29vw, 29em);
    }
    .ml-l-30 {
        margin-left: clamp(15em, 30vw, 30em);
    }



    .mr-l-0 {
        margin-right: 0;
    }
    .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);
    }
    .mr-l-21 {
        margin-right: clamp(10.4em, 21vw, 21em);
    }
    .mr-l-22 {
        margin-right: clamp(10.8em, 22vw, 22em);
    }
    .mr-l-23 {
        margin-right: clamp(11.2em, 23vw, 23em);
    }
    .mr-l-24 {
        margin-right: clamp(11.6em, 24vw, 24em);
    }
    .mr-l-25 {
        margin-right: clamp(12em, 25vw, 25em);
    }
    .mr-l-26 {
        margin-right: clamp(12.4em, 26vw, 26em);
    }
    .mr-l-27 {
        margin-right: clamp(12.8em, 27vw, 27em);
    }
    .mr-l-28 {
        margin-right: clamp(13.2em, 28vw, 28em);
    }
    .mr-l-29 {
        margin-right: clamp(13.6em, 29vw, 29em);
    }
    .mr-l-30 {
        margin-right: clamp(15em, 30vw, 30em);
    }





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

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


    .pt-l-0 {
        padding-top: 0;
    }
    .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);
    }
    .pt-l-21 {
        padding-top: clamp(10.4em, 21vw, 21em);
    }
    .pt-l-22 {
        padding-top: clamp(10.8em, 22vw, 22em);
    }
    .pt-l-23 {
        padding-top: clamp(11.2em, 23vw, 23em);
    }
    .pt-l-24 {
        padding-top: clamp(11.6em, 24vw, 24em);
    }
    .pt-l-25 {
        padding-top: clamp(12em, 25vw, 25em);
    }
    .pt-l-26 {
        padding-top: clamp(12.4em, 26vw, 26em);
    }
    .pt-l-27 {
        padding-top: clamp(12.8em, 27vw, 27em);
    }
    .pt-l-28 {
        padding-top: clamp(13.2em, 28vw, 28em);
    }
    .pt-l-29 {
        padding-top: clamp(13.6em, 29vw, 29em);
    }
    .pt-l-30 {
        padding-top: clamp(15em, 30vw, 30em);
    }



    .pb-l-0 {
        padding-bottom: 0;
    }
    .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);
    }
    .pb-l-21 {
        padding-bottom: clamp(10.4em, 21vw, 21em);
    }
    .pb-l-22 {
        padding-bottom: clamp(10.8em, 22vw, 22em);
    }
    .pb-l-23 {
        padding-bottom: clamp(11.2em, 23vw, 23em);
    }
    .pb-l-24 {
        padding-bottom: clamp(11.6em, 24vw, 24em);
    }
    .pb-l-25 {
        padding-bottom: clamp(12em, 25vw, 25em);
    }
    .pb-l-26 {
        padding-bottom: clamp(12.4em, 26vw, 26em);
    }
    .pb-l-27 {
        padding-bottom: clamp(12.8em, 27vw, 27em);
    }
    .pb-l-28 {
        padding-bottom: clamp(13.2em, 28vw, 28em);
    }
    .pb-l-29 {
        padding-bottom: clamp(13.6em, 29vw, 29em);
    }
    .pb-l-30 {
        padding-bottom: clamp(15em, 30vw, 30em);
    }



    .pl-l-0 {
        padding-left: 0;
    }
    .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.5em, 11vw, 11em);
    }
    .pl-l-12 {
        padding-left: clamp(6em, 6vw, 6em);
    }
    .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);
    }
    .pl-l-20 {
        padding-left: clamp(10em, 20vw, 20em);
    }
    .pl-l-21 {
        padding-left: clamp(10.4em, 21vw, 21em);
    }
    .pl-l-22 {
        padding-left: clamp(10.8em, 22vw, 22em);
    }
    .pl-l-23 {
        padding-left: clamp(11.2em, 23vw, 23em);
    }
    .pl-l-24 {
        padding-left: clamp(11.6em, 24vw, 24em);
    }
    .pl-l-25 {
        padding-left: clamp(12em, 25vw, 25em);
    }
    .pl-l-26 {
        padding-left: clamp(12.4em, 26vw, 26em);
    }
    .pl-l-27 {
        padding-left: clamp(12.8em, 27vw, 27em);
    }
    .pl-l-28 {
        padding-left: clamp(13.2em, 28vw, 28em);
    }
    .pl-l-29 {
        padding-left: clamp(13.6em, 29vw, 29em);
    }
    .pl-l-30 {
        padding-left: clamp(15em, 30vw, 30em);
    }



    .pr-l-0 {
        padding-right: 0;
    }
    .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.5em, 11vw, 11em);
    }
    .pr-l-12 {
        padding-right: clamp(6em, 6vw, 6em);
    }
    .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);
    }
    .pr-l-20 {
        padding-right: clamp(10em, 20vw, 20em);
    }
    .pr-l-21 {
        padding-right: clamp(10.4em, 21vw, 21em);
    }
    .pr-l-22 {
        padding-right: clamp(10.8em, 22vw, 22em);
    }
    .pr-l-23 {
        padding-right: clamp(11.2em, 23vw, 23em);
    }
    .pr-l-24 {
        padding-right: clamp(11.6em, 24vw, 24em);
    }
    .pr-l-25 {
        padding-right: clamp(12em, 25vw, 25em);
    }
    .pr-l-26 {
        padding-right: clamp(12.4em, 26vw, 26em);
    }
    .pr-l-27 {
        padding-right: clamp(12.8em, 27vw, 27em);
    }
    .pr-l-28 {
        padding-right: clamp(13.2em, 28vw, 28em);
    }
    .pr-l-29 {
        padding-right: clamp(13.6em, 29vw, 29em);
    }
    .pr-l-30 {
        padding-right: clamp(15em, 30vw, 30em);
    }

}




/* MEDIUM M */

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


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

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


    .mt-m-0 {
        margin-top: 0;
    }
    .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);
    }
    .mt-m-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-m-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-m-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-m-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-m-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }
    .mt-m-21 {
        margin-top: clamp(10.4em, 21vw, 21em);
    }
    .mt-m-22 {
        margin-top: clamp(10.8em, 22vw, 22em);
    }
    .mt-m-23 {
        margin-top: clamp(11.2em, 23vw, 23em);
    }
    .mt-m-24 {
        margin-top: clamp(11.6em, 24vw, 24em);
    }
    .mt-m-25 {
        margin-top: clamp(12em, 25vw, 25em);
    }
    .mt-m-26 {
        margin-top: clamp(12.4em, 26vw, 26em);
    }
    .mt-m-27 {
        margin-top: clamp(12.8em, 27vw, 27em);
    }
    .mt-m-28 {
        margin-top: clamp(13.2em, 28vw, 28em);
    }
    .mt-m-29 {
        margin-top: clamp(13.6em, 29vw, 29em);
    }
    .mt-m-30 {
        margin-top: clamp(15em, 30vw, 30em);
    }



    .mb-m-0 {
        margin-bottom: 0;
    }
    .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);
    }
    .mb-m-16 {
        margin-bottom: clamp(7.4em, 16vw, 16em);
    }
    .mb-m-17 {
        margin-bottom: clamp(7.8em, 17vw, 17em);
    }
    .mb-m-18 {
        margin-bottom: clamp(8.2em, 18vw, 18em);
    }
    .mb-m-19 {
        margin-bottom: clamp(8.6em, 19vw, 19em);
    }
    .mb-m-20 {
        margin-bottom: clamp(10em, 20vw, 20em);
    }
    .mb-m-21 {
        margin-bottom: clamp(10.4em, 21vw, 21em);
    }
    .mb-m-22 {
        margin-bottom: clamp(10.8em, 22vw, 22em);
    }
    .mb-m-23 {
        margin-bottom: clamp(11.2em, 23vw, 23em);
    }
    .mb-m-24 {
        margin-bottom: clamp(11.6em, 24vw, 24em);
    }
    .mb-m-25 {
        margin-bottom: clamp(12em, 25vw, 25em);
    }
    .mb-m-26 {
        margin-bottom: clamp(12.4em, 26vw, 26em);
    }
    .mb-m-27 {
        margin-bottom: clamp(12.8em, 27vw, 27em);
    }
    .mb-m-28 {
        margin-bottom: clamp(13.2em, 28vw, 28em);
    }
    .mb-m-29 {
        margin-bottom: clamp(13.6em, 29vw, 29em);
    }
    .mb-m-30 {
        margin-bottom: clamp(15em, 30vw, 30em);
    }



    .ml-m-0 {
        margin-left: 0;
    }
    .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);
    }
    .ml-m-16 {
        margin-left: clamp(7.4em, 16vw, 16em);
    }
    .ml-m-17 {
        margin-left: clamp(7.8em, 17vw, 17em);
    }
    .ml-m-18 {
        margin-left: clamp(8.2em, 18vw, 18em);
    }
    .ml-m-19 {
        margin-left: clamp(8.6em, 19vw, 19em);
    }
    .ml-m-20 {
        margin-left: clamp(10em, 20vw, 20em);
    }
    .ml-m-21 {
        margin-left: clamp(10.4em, 21vw, 21em);
    }
    .ml-m-22 {
        margin-left: clamp(10.8em, 22vw, 22em);
    }
    .ml-m-23 {
        margin-left: clamp(11.2em, 23vw, 23em);
    }
    .ml-m-24 {
        margin-left: clamp(11.6em, 24vw, 24em);
    }
    .ml-m-25 {
        margin-left: clamp(12em, 25vw, 25em);
    }
    .ml-m-26 {
        margin-left: clamp(12.4em, 26vw, 26em);
    }
    .ml-m-27 {
        margin-left: clamp(12.8em, 27vw, 27em);
    }
    .ml-m-28 {
        margin-left: clamp(13.2em, 28vw, 28em);
    }
    .ml-m-29 {
        margin-left: clamp(13.6em, 29vw, 29em);
    }
    .ml-m-30 {
        margin-left: clamp(15em, 30vw, 30em);
    }



    .mr-m-0 {
        margin-right: 0;
    }
    .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);
    }
    .mr-m-16 {
        margin-right: clamp(7.4em, 16vw, 16em);
    }
    .mr-m-17 {
        margin-right: clamp(7.8em, 17vw, 17em);
    }
    .mr-m-18 {
        margin-right: clamp(8.2em, 18vw, 18em);
    }
    .mr-m-19 {
        margin-right: clamp(8.6em, 19vw, 19em);
    }
    .mr-m-20 {
        margin-right: clamp(10em, 20vw, 20em);
    }
    .mr-m-21 {
        margin-right: clamp(10.4em, 21vw, 21em);
    }
    .mr-m-22 {
        margin-right: clamp(10.8em, 22vw, 22em);
    }
    .mr-m-23 {
        margin-right: clamp(11.2em, 23vw, 23em);
    }
    .mr-m-24 {
        margin-right: clamp(11.6em, 24vw, 24em);
    }
    .mr-m-25 {
        margin-right: clamp(12em, 25vw, 25em);
    }
    .mr-m-26 {
        margin-right: clamp(12.4em, 26vw, 26em);
    }
    .mr-m-27 {
        margin-right: clamp(12.8em, 27vw, 27em);
    }
    .mr-m-28 {
        margin-right: clamp(13.2em, 28vw, 28em);
    }
    .mr-m-29 {
        margin-right: clamp(13.6em, 29vw, 29em);
    }
    .mr-m-30 {
        margin-right: clamp(15em, 30vw, 30em);
    }





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

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


    .pt-m-0 {
        padding-top: 0;
    }
    .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);
    }
    .pt-m-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-m-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-m-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-m-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-m-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }
    .pt-m-21 {
        padding-top: clamp(10.4em, 21vw, 21em);
    }
    .pt-m-22 {
        padding-top: clamp(10.8em, 22vw, 22em);
    }
    .pt-m-23 {
        padding-top: clamp(11.2em, 23vw, 23em);
    }
    .pt-m-24 {
        padding-top: clamp(11.6em, 24vw, 24em);
    }
    .pt-m-25 {
        padding-top: clamp(12em, 25vw, 25em);
    }
    .pt-m-26 {
        padding-top: clamp(12.4em, 26vw, 26em);
    }
    .pt-m-27 {
        padding-top: clamp(12.8em, 27vw, 27em);
    }
    .pt-m-28 {
        padding-top: clamp(13.2em, 28vw, 28em);
    }
    .pt-m-29 {
        padding-top: clamp(13.6em, 29vw, 29em);
    }
    .pt-m-30 {
        padding-top: clamp(15em, 30vw, 30em);
    }



    .pb-m-0 {
        padding-bottom: 0;
    }
    .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);
    }
    .pb-m-16 {
        padding-bottom: clamp(7.4em, 16vw, 16em);
    }
    .pb-m-17 {
        padding-bottom: clamp(7.8em, 17vw, 17em);
    }
    .pb-m-18 {
        padding-bottom: clamp(8.2em, 18vw, 18em);
    }
    .pb-m-19 {
        padding-bottom: clamp(8.6em, 19vw, 19em);
    }
    .pb-m-20 {
        padding-bottom: clamp(10em, 20vw, 20em);
    }
    .pb-m-21 {
        padding-bottom: clamp(10.4em, 21vw, 21em);
    }
    .pb-m-22 {
        padding-bottom: clamp(10.8em, 22vw, 22em);
    }
    .pb-m-23 {
        padding-bottom: clamp(11.2em, 23vw, 23em);
    }
    .pb-m-24 {
        padding-bottom: clamp(11.6em, 24vw, 24em);
    }
    .pb-m-25 {
        padding-bottom: clamp(12em, 25vw, 25em);
    }
    .pb-m-26 {
        padding-bottom: clamp(12.4em, 26vw, 26em);
    }
    .pb-m-27 {
        padding-bottom: clamp(12.8em, 27vw, 27em);
    }
    .pb-m-28 {
        padding-bottom: clamp(13.2em, 28vw, 28em);
    }
    .pb-m-29 {
        padding-bottom: clamp(13.6em, 29vw, 29em);
    }
    .pb-m-30 {
        padding-bottom: clamp(15em, 30vw, 30em);
    }



    .pl-m-0 {
        padding-left: 0;
    }
    .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.5em, 11vw, 11em);
    }
    .pl-m-12 {
        padding-left: clamp(6em, 6vw, 6em);
    }
    .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);
    }
    .pl-m-16 {
        padding-left: clamp(7.4em, 16vw, 16em);
    }
    .pl-m-17 {
        padding-left: clamp(7.8em, 17vw, 17em);
    }
    .pl-m-18 {
        padding-left: clamp(8.2em, 18vw, 18em);
    }
    .pl-m-19 {
        padding-left: clamp(8.6em, 19vw, 19em);
    }
    .pl-m-20 {
        padding-left: clamp(10em, 20vw, 20em);
    }
    .pl-m-20 {
        padding-left: clamp(10em, 20vw, 20em);
    }
    .pl-m-21 {
        padding-left: clamp(10.4em, 21vw, 21em);
    }
    .pl-m-22 {
        padding-left: clamp(10.8em, 22vw, 22em);
    }
    .pl-m-23 {
        padding-left: clamp(11.2em, 23vw, 23em);
    }
    .pl-m-24 {
        padding-left: clamp(11.6em, 24vw, 24em);
    }
    .pl-m-25 {
        padding-left: clamp(12em, 25vw, 25em);
    }
    .pl-m-26 {
        padding-left: clamp(12.4em, 26vw, 26em);
    }
    .pl-m-27 {
        padding-left: clamp(12.8em, 27vw, 27em);
    }
    .pl-m-28 {
        padding-left: clamp(13.2em, 28vw, 28em);
    }
    .pl-m-29 {
        padding-left: clamp(13.6em, 29vw, 29em);
    }
    .pl-m-30 {
        padding-left: clamp(15em, 30vw, 30em);
    }



    .pr-m-0 {
        padding-right: 0;
    }
    .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.5em, 11vw, 11em);
    }
    .pr-m-12 {
        padding-right: clamp(6em, 6vw, 6em);
    }
    .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);
    }
    .pr-m-16 {
        padding-right: clamp(7.4em, 16vw, 16em);
    }
    .pr-m-17 {
        padding-right: clamp(7.8em, 17vw, 17em);
    }
    .pr-m-18 {
        padding-right: clamp(8.2em, 18vw, 18em);
    }
    .pr-m-19 {
        padding-right: clamp(8.6em, 19vw, 19em);
    }
    .pr-m-20 {
        padding-right: clamp(10em, 20vw, 20em);
    }
    .pr-m-20 {
        padding-right: clamp(10em, 20vw, 20em);
    }
    .pr-m-21 {
        padding-right: clamp(10.4em, 21vw, 21em);
    }
    .pr-m-22 {
        padding-right: clamp(10.8em, 22vw, 22em);
    }
    .pr-m-23 {
        padding-right: clamp(11.2em, 23vw, 23em);
    }
    .pr-m-24 {
        padding-right: clamp(11.6em, 24vw, 24em);
    }
    .pr-m-25 {
        padding-right: clamp(12em, 25vw, 25em);
    }
    .pr-m-26 {
        padding-right: clamp(12.4em, 26vw, 26em);
    }
    .pr-m-27 {
        padding-right: clamp(12.8em, 27vw, 27em);
    }
    .pr-m-28 {
        padding-right: clamp(13.2em, 28vw, 28em);
    }
    .pr-m-29 {
        padding-right: clamp(13.6em, 29vw, 29em);
    }
    .pr-m-30 {
        padding-right: clamp(15em, 30vw, 30em);
    }

}







/* SMALL S */


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


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


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


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



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



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



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





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

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


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



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



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



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

}




/* EXTRA SMALL XS */

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


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


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


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



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



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



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





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

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


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



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



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



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

}





/* EXTRA EXTRA SMALL XXS */

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


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

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


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



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



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



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





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

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


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



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



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



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

}






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

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

1300px = XL
1100px = L
 900px = M
 700px = S
 500px = XS

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




/* POSITIONING */
.center {
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    display: grid;
}

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

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

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

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

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

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

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

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

.filled-left {
    justify-content: start;
    align-content: stretch;
    display: grid;
}

.filled-right {
    justify-content: end;
    align-content: stretch;
    justify-items: end;
    align-items: stretch;
    display: grid;
}

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




/* EXTRA LARGE XL */

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


/* LARGE L */

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


/* MEDIUM M */

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


/* SMALL S */

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


/* EXTRA SMALL XS */

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



/* EXTRA EXTRA SMALL XXS */

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





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

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

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

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

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

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

    .left-text-xl, .left-text-xl p, .left-text-xl a, .left-text-xl h1, .left-text-xl h2, .left-text-xl h3, .left-text-xl h4, .left-text-xl h5 {
        text-align: left;
    }
    
    .right-text-xl p, .right-text-xl p, .right-text-xl a, .right-text-xl h1, .right-text-xl h2, .right-text-xl h3, .right-text-xl h4, .right-text-xl h5 {
        text-align: right;
    }
    
    .center-text-xl, .center-text-xl p, .center-text-xl a, .center-text-xl h1, .center-text-xl h2, .center-text-xl h3, .center-text-xl h4, .center-text-xl h5 {
        text-align: center;
    }
    
    .justify-text-xl, .justify-text-xl p, .justify-text-xl a, .justify-text-xl h1, .justify-text-xl h2, .justify-text-xl h3, .justify-text-xl h4, .justify-text-xl h5 {
        text-align: justify;
    }
}

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

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

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

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

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

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

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

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

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

    .left-text-xxs, .left-text-xxs p, .left-text-xxs a, .left-text-xxs h1, .left-text-xxs h2, .left-text-xxs h3, .left-text-xxs h4, .left-text-xxs h5 {
        text-align: left;
    }
    
    .right-text-xxs, .right-text-xxs p, .right-text-xxs a, .right-text-xxs h1, .right-text-xxs h2, .right-text-xxs h3, .right-text-xxs h4, .right-text-xxs h5 {
        text-align: right;
    }
    
    .center-text-xxs, .center-text-xxs p, .center-text-xxs a, .center-text-xxs h1, .center-text-xxs h2, .center-text-xxs h3, .center-text-xxs h4, .center-text-xxs h5 {
        text-align: center;
    }
    
    .justify-text-xxs, .justify-text-xxs p, .justify-text-xxs a, .justify-text-xxs h1, .justify-text-xxs h2, .justify-text-xxs h3, .justify-text-xxs h4, .justify-text-xxs h5 {
        text-align: justify;
    }
}