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

  _    _ ____ _____ ____     _____  _____ _____    _____ _____  _____ _____  
 | |  | |  _ \_   _/ __ \   / ____|/ ____/ ____|  / ____|  __ \|_   _|  __ \ 
 | |  | | |_) || || |  | | | |    | (___| (___   | |  __| |__) | | | | |  | |
 | |  | |  _ < | || |  | | | |     \___ \\___ \  | | |_ |  _  /  | | | |  | |
 | |__| | |_) || || |__| | | |____ ____) |___) | | |__| | | \ \ _| |_| |__| |
  \____/|____/_____\___\_\  \_____|_____/_____/   \_____|_|  \_\_____|_____/ 
                                                                             
 
 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)
    



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

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: 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(--grey-200);
    padding: 1em 0 2em;
}







/*------------------------------------------------------------------------------------------------------------------------------
                                                        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 {
    width: 100%;
    float: left;
}

#boxed {
    width: calc(100% - 40px);
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
}

#small {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

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


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







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

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

}


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

}
  

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



}


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

}









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


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



/* Columns */

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


/* Columns */

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


/* Columns */

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

      

/* Columns */

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

    

}









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


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

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

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

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




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


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


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



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


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




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

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

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

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





/* EXTRA LARGE XL */

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


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


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



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



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



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





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


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



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



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



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


}




/* LARGE L */

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


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


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



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



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



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





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


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



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



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



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

}




/* MEDIUM M */

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


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


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



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



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



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





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



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


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



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



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


}




/* SMALL S */


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


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



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



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



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



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





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


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



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



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



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


}




/* EXTRA SMALL XS */

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


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


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



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



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



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





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


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



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



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



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

}





/* EXTRA EXTRA SMALL XXS */

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


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


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



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



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



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





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


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



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



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



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

}






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

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

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

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




/* POSITIONING */


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

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

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

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

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

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

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

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

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

.filled-left, .filled-left .newsflash {
    justify-items: left;
    align-items: stretch;
    display: grid;
}

.filled-right, .filled-right .newsflash {
    justify-items: right;
    align-items: stretch;
    display: grid;
}

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




/* EXTRA LARGE XL */

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

    .filled-left-xl, .filled-left-xl .newsflash {
        justify-items: left;
        align-items: stretch;
        display: grid;
    }

    .filled-right-xl, .filled-right-xl .newsflash {
        justify-items: right;
        align-items: stretch;
        display: grid;
    }

    .filled-center-xl, .filled-center-xl .newsflash {
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}


/* LARGE L */

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

    .filled-left-l, .filled-left-l .newsflash {
        justify-items: left;
        align-items: stretch;
        display: grid;
    }

    .filled-right-l, .filled-right-l .newsflash {
        justify-items: right;
        align-items: stretch;
        display: grid;
    }

    .filled-center-l, .filled-center-l .newsflash {
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}


/* MEDIUM M */

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

    .filled-left-m, .filled-left-m .newsflash {
        justify-items: left;
        align-items: stretch;
        display: grid;
    }

    .filled-right-m, .filled-right-m .newsflash {
        justify-items: right;
        align-items: stretch;
        display: grid;
    }

    .filled-center-m, .filled-center-m .newsflash {
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}


/* SMALL S */

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

    .filled-left-s, .filled-left-s .newsflash {
        justify-items: left;
        align-items: stretch;
        display: grid;
    }

    .filled-right-s, .filled-right-s .newsflash {
        justify-items: right;
        align-items: stretch;
        display: grid;
    }

    .filled-center-s, .filled-center-s .newsflash {
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}


/* EXTRA SMALL XS */

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

    .filled-left-xs, .filled-left-xs .newsflash {
        justify-items: left;
        align-items: stretch;
        display: grid;
    }

    .filled-right-xs, .filled-right-xs .newsflash {
        justify-items: right;
        align-items: stretch;
        display: grid;
    }

    .filled-center-xs, .filled-center-xs .newsflash {
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}



/* EXTRA EXTRA SMALL XXS */

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

    .filled-left-xxs, .filled-left-xxs .newsflash {
        justify-items: left;
        align-items: stretch;
        display: grid;
    }

    .filled-right-xxs, .filled-right-xxs .newsflash {
        justify-items: right;
        align-items: stretch;
        display: grid;
    }

    .filled-center-xxs, .filled-center-xxs .newsflash {
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}




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

.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 p, .right-text a, .right-text h1, .right-text h2, .right-text h3, .right-text h4, .right-text h5 {
    text-align: right;
}

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