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



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

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

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





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

1300px = L
 900px = M
 600px = S
 450px = XS

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



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



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



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

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




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


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

/* SPALTEN */

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




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

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

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





    /* REIHEN */

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

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





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

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




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

/* LARGE L */

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


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

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



/* Columns */

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


/* Rows */

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



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

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


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

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



}


/* MEDIUM M */

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


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


/* Columns */

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


/* Rows */

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



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

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


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

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



}



/* SMALL S */

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


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

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


/* Columns */

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


/* Rows */

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


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

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


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

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


/* EXTRA SMALL XS */

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

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

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

      

/* Columns */

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


/* Rows */

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


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

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


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

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

    

}








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

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



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

1300px = L
900px = M
600px = S
450px = XS

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



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

/* LARGE L */

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

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

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

}


/* LARGE M */

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

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

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

}


/* LARGE S */

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

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

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

}


/* LARGE XS */

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

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

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

}








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



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


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


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

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

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

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




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


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


.pt-0 {
    padding-top: 0;
}
.pt-1 {
    padding-top: clamp(0.8em, 1vw, 1em);
}
.pt-2 {
    padding-top: clamp(1.2em, 2vw, 2em);
}
.pt-3 {
    padding-top: clamp(1.6em, 3vw, 3em);
}
.pt-4 {
    padding-top: clamp(2em, 4vw, 4em);
}
.pt-5 {
    padding-top: clamp(2.4em, 5vw, 5em);
}
.pt-6 {
    padding-top: clamp(2.8em, 6vw, 6em);
}
.pt-7 {
    padding-top: clamp(3.2em, 7vw, 7em);
}
.pt-8 {
    padding-top: clamp(3.6em, 8vw, 8em);
}
.pt-9 {
    padding-top: clamp(4em, 9vw, 9em);
}
.pt-10 {
    padding-top: clamp(5em, 10vw, 10em);
}
.pt-11 {
    padding-top: clamp(5.4em, 11vw, 11em);
}
.pt-12 {
    padding-top: clamp(5.8em, 12vw, 12em);
}
.pt-13 {
    padding-top: clamp(6.2em, 13vw, 13em);
}
.pt-14 {
    padding-top: clamp(6.6em, 14vw, 14em);
}
.pt-15 {
    padding-top: clamp(7em, 15vw, 15em);
}
.pt-16 {
    padding-top: clamp(7.4em, 16vw, 16em);
}
.pt-17 {
    padding-top: clamp(7.8em, 17vw, 17em);
}
.pt-18 {
    padding-top: clamp(8.2em, 18vw, 18em);
}
.pt-19 {
    padding-top: clamp(8.6em, 19vw, 19em);
}
.pt-20 {
    padding-top: clamp(10em, 20vw, 20em);
}



.pb-0 {
    padding-bottom: 0;
}
.pb-1 {
    padding-bottom: clamp(0.8em, 1vw, 1em);
}
.pb-2 {
    padding-bottom: clamp(1.2em, 2vw, 2em);
}
.pb-3 {
    padding-bottom: clamp(1.6em, 3vw, 3em);
}
.pb-4 {
    padding-bottom: clamp(2em, 4vw, 4em);
}
.pb-5 {
    padding-bottom: clamp(2.4em, 5vw, 5em);
}
.pb-6 {
    padding-bottom: clamp(2.8em, 6vw, 6em);
}
.pb-7 {
    padding-bottom: clamp(3.2em, 7vw, 7em);
}
.pb-8 {
    padding-bottom: clamp(3.6em, 8vw, 8em);
}
.pb-9 {
    padding-bottom: clamp(4em, 9vw, 9em);
}
.pb-10 {
    padding-bottom: clamp(5em, 10vw, 10em);
}
.pb-11 {
    padding-bottom: clamp(5.4em, 11vw, 11em);
}
.pb-12 {
    padding-bottom: clamp(5.8em, 12vw, 12em);
}
.pb-13 {
    padding-bottom: clamp(6.2em, 13vw, 13em);
}
.pb-14 {
    padding-bottom: clamp(6.6em, 14vw, 14em);
}
.pb-15 {
    padding-bottom: clamp(7em, 15vw, 15em);
}
.pb-16 {
    padding-bottom: clamp(7.4em, 16vw, 16em);
}
.pb-17 {
    padding-bottom: clamp(7.8em, 17vw, 17em);
}
.pb-18 {
    padding-bottom: clamp(8.2em, 18vw, 18em);
}
.pb-19 {
    padding-bottom: clamp(8.6em, 19vw, 19em);
}
.pb-20 {
    padding-bottom: clamp(10em, 20vw, 20em);
}



.pl-0 {
    padding-left: 0;
}
.pl-1 {
    padding-left: clamp(0.8em, 1vw, 1em);
}
.pl-2 {
    padding-left: clamp(1.2em, 2vw, 2em);
}
.pl-3 {
    padding-left: clamp(1.6em, 3vw, 3em);
}
.pl-4 {
    padding-left: clamp(2em, 4vw, 4em);
}
.pl-5 {
    padding-left: clamp(2.4em, 5vw, 5em);
}
.pl-6 {
    padding-left: clamp(2.8em, 6vw, 6em);
}
.pl-7 {
    padding-left: clamp(3.2em, 7vw, 7em);
}
.pl-8 {
    padding-left: clamp(3.6em, 8vw, 8em);
}
.pl-9 {
    padding-left: clamp(4em, 9vw, 9em);
}
.pl-10 {
    padding-left: clamp(5em, 10vw, 10em);
}
.pl-11 {
    padding-left: clamp(5.5em, 11vw, 11em);
}
.pl-12 {
    padding-left: clamp(6em, 6vw, 6em);
}



.pr-0 {
    padding-right: 0;
}
.pr-1 {
    padding-right: clamp(0.8em, 1vw, 1em);
}
.pr-2 {
    padding-right: clamp(1.2em, 2vw, 2em);
}
.pr-3 {
    padding-right: clamp(1.6em, 3vw, 3em);
}
.pr-4 {
    padding-right: clamp(2em, 4vw, 4em);
}
.pr-5 {
    padding-right: clamp(2.4em, 5vw, 5em);
}
.pr-6 {
    padding-right: clamp(2.8em, 6vw, 6em);
}
.pr-7 {
    padding-right: clamp(3.2em, 7vw, 7em);
}
.pr-8 {
    padding-right: clamp(3.6em, 8vw, 8em);
}
.pr-9 {
    padding-right: clamp(4em, 9vw, 9em);
}
.pr-10 {
    padding-right: clamp(5em, 10vw, 10em);
}
.pr-11 {
    padding-right: clamp(5.5em, 11vw, 11em);
}
.pr-12 {
    padding-right: clamp(6em, 6vw, 6em);
}






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

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

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

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





/* EXTRA LARGE XL */

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


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


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

    .mt-xl-0 {
        margin-top: 0;
    }
    .mt-xl-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-xl-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-xl-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-xl-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-xl-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-xl-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-xl-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-xl-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-xl-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-xl-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-xl-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-xl-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-xl-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-xl-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-xl-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    .mt-xl-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-xl-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-xl-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-xl-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-xl-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }



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


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

    .pt-xl-0 {
        padding-top: 0;
    }
    .pt-xl-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-xl-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-xl-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-xl-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-xl-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-xl-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-xl-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-xl-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-xl-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-xl-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-xl-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-xl-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-xl-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-xl-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-xl-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-xl-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-xl-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-xl-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-xl-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-xl-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }



    .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);
    }
    .pl-xl-11 {
        padding-left: clamp(5.5em, 11vw, 11em);
    }
    .pl-xl-12 {
        padding-left: clamp(6em, 6vw, 6em);
    }



    .pr-xl-0 {
        padding-right: 0;
    }
    .pr-xl-1 {
        padding-right: clamp(0.8em, 1vw, 1em);
    }
    .pr-xl-2 {
        padding-right: clamp(1.2em, 2vw, 2em);
    }
    .pr-xl-3 {
        padding-right: clamp(1.6em, 3vw, 3em);
    }
    .pr-xl-4 {
        padding-right: clamp(2em, 4vw, 4em);
    }
    .pr-xl-5 {
        padding-right: clamp(2.4em, 5vw, 5em);
    }
    .pr-xl-6 {
        padding-right: clamp(2.8em, 6vw, 6em);
    }
    .pr-xl-7 {
        padding-right: clamp(3.2em, 7vw, 7em);
    }
    .pr-xl-8 {
        padding-right: clamp(3.6em, 8vw, 8em);
    }
    .pr-xl-9 {
        padding-right: clamp(4em, 9vw, 9em);
    }
    .pr-xl-10 {
        padding-right: clamp(5em, 10vw, 10em);
    }
    .pr-xl-11 {
        padding-right: clamp(5.5em, 11vw, 11em);
    }
    .pr-xl-12 {
        padding-right: clamp(6em, 6vw, 6em);
    }


}




/* LARGE L */

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


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

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


    .mt-l-0 {
        margin-top: 0;
    }
    .mt-l-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-l-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-l-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-l-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-l-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-l-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-l-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-l-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-l-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-l-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-l-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-l-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-l-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-l-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-l-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    .mt-l-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-l-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-l-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-l-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-l-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }



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



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





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

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


    .pt-l-0 {
        padding-top: 0;
    }
    .pt-l-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-l-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-l-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-l-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-l-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-l-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-l-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-l-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-l-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-l-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-l-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-l-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-l-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-l-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-l-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-l-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-l-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-l-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-l-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-l-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }



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


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

    .mt-m-0 {
        margin-top: 0;
    }
    .mt-m-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-m-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-m-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-m-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-m-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-m-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-m-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-m-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-m-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-m-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-m-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 ================================ */


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


    .pt-m-0 {
        padding-top: 0;
    }
    .pt-m-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-m-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-m-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-m-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-m-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-m-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-m-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-m-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-m-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-m-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-m-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-m-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-m-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-m-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-m-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-m-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-m-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-m-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-m-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-m-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }


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


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

    .mt-s-0 {
        margin-top: 0;
    }
    .mt-s-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-s-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-s-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-s-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-s-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-s-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-s-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-s-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-s-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-s-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-s-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-s-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-s-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-s-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-s-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    .mt-s-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-s-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-s-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-s-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-s-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }



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


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


    .pt-s-0 {
        padding-top: 0;
    }
    .pt-s-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-s-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-s-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-s-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-s-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-s-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-s-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-s-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-s-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-s-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-s-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-s-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-s-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-s-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-s-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-s-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-s-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-s-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-s-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-s-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }



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


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


    .mt-xs-0 {
        margin-top: 0;
    }
    .mt-xs-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-xs-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-xs-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-xs-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-xs-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-xs-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-xs-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-xs-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-xs-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-xs-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-xs-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-xs-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-xs-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-xs-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-xs-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    .mt-xs-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-xs-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-xs-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-xs-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-xs-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }



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


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

    .pt-xs-0 {
        padding-top: 0;
    }
    .pt-xs-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-xs-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-xs-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-xs-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-xs-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-xs-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-xs-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-xs-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-xs-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-xs-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-xs-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-xs-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-xs-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-xs-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-xs-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-xs-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-xs-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-xs-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-xs-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-xs-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }



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


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

    .mt-xxs-0 {
        margin-top: 0;
    }
    .mt-xxs-1 {
        margin-top: clamp(0.8em, 1vw, 1em);
    }
    .mt-xxs-2 {
        margin-top: clamp(1.2em, 2vw, 2em);
    }
    .mt-xxs-3 {
        margin-top: clamp(1.6em, 3vw, 3em);
    }
    .mt-xxs-4 {
        margin-top: clamp(2em, 4vw, 4em);
    }
    .mt-xxs-5 {
        margin-top: clamp(2.4em, 5vw, 5em);
    }
    .mt-xxs-6 {
        margin-top: clamp(2.8em, 6vw, 6em);
    }
    .mt-xxs-7 {
        margin-top: clamp(3.2em, 7vw, 7em);
    }
    .mt-xxs-8 {
        margin-top: clamp(3.6em, 8vw, 8em);
    }
    .mt-xxs-9 {
        margin-top: clamp(4em, 9vw, 9em);
    }
    .mt-xxs-10 {
        margin-top: clamp(5em, 10vw, 10em);
    }
    .mt-xxs-11 {
        margin-top: clamp(5.4em, 11vw, 11em);
    }
    .mt-xxs-12 {
        margin-top: clamp(5.8em, 12vw, 12em);
    }
    .mt-xxs-13 {
        margin-top: clamp(6.2em, 13vw, 13em);
    }
    .mt-xxs-14 {
        margin-top: clamp(6.6em, 14vw, 14em);
    }
    .mt-xxs-15 {
        margin-top: clamp(7em, 15vw, 15em);
    }
    .mt-xxs-16 {
        margin-top: clamp(7.4em, 16vw, 16em);
    }
    .mt-xxs-17 {
        margin-top: clamp(7.8em, 17vw, 17em);
    }
    .mt-xxs-18 {
        margin-top: clamp(8.2em, 18vw, 18em);
    }
    .mt-xxs-19 {
        margin-top: clamp(8.6em, 19vw, 19em);
    }
    .mt-xxs-20 {
        margin-top: clamp(10em, 20vw, 20em);
    }



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


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


    .pt-xxs-0 {
        padding-top: 0;
    }
    .pt-xxs-1 {
        padding-top: clamp(0.8em, 1vw, 1em);
    }
    .pt-xxs-2 {
        padding-top: clamp(1.2em, 2vw, 2em);
    }
    .pt-xxs-3 {
        padding-top: clamp(1.6em, 3vw, 3em);
    }
    .pt-xxs-4 {
        padding-top: clamp(2em, 4vw, 4em);
    }
    .pt-xxs-5 {
        padding-top: clamp(2.4em, 5vw, 5em);
    }
    .pt-xxs-6 {
        padding-top: clamp(2.8em, 6vw, 6em);
    }
    .pt-xxs-7 {
        padding-top: clamp(3.2em, 7vw, 7em);
    }
    .pt-xxs-8 {
        padding-top: clamp(3.6em, 8vw, 8em);
    }
    .pt-xxs-9 {
        padding-top: clamp(4em, 9vw, 9em);
    }
    .pt-xxs-10 {
        padding-top: clamp(5em, 10vw, 10em);
    }
    .pt-xxs-11 {
        padding-top: clamp(5.4em, 11vw, 11em);
    }
    .pt-xxs-12 {
        padding-top: clamp(5.8em, 12vw, 12em);
    }
    .pt-xxs-13 {
        padding-top: clamp(6.2em, 13vw, 13em);
    }
    .pt-xxs-14 {
        padding-top: clamp(6.6em, 14vw, 14em);
    }
    .pt-xxs-15 {
        padding-top: clamp(7em, 15vw, 15em);
    }
    .pt-xxs-16 {
        padding-top: clamp(7.4em, 16vw, 16em);
    }
    .pt-xxs-17 {
        padding-top: clamp(7.8em, 17vw, 17em);
    }
    .pt-xxs-18 {
        padding-top: clamp(8.2em, 18vw, 18em);
    }
    .pt-xxs-19 {
        padding-top: clamp(8.6em, 19vw, 19em);
    }
    .pt-xxs-20 {
        padding-top: clamp(10em, 20vw, 20em);
    }



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

}







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

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

1300px = L
 900px = M
 600px = S
 450px = XS

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


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

}

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

}

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

}

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

}




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

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

1300px = L
 900px = M
 600px = S
 450px = 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;
}




/* LARGE L */

@media only screen and (max-width: 1300px) {  
    .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: 600px) {  
    .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: 450px) {  
    .center-xs {
        justify-items: center;
        align-items: center;
        display: grid;
    }
    
    .center-left-xs {
        justify-items: left;
        align-items: center;
        display: grid;
    }
    
    .center-right-xs {
        justify-items: right;
        align-items: center;
        display: grid;
    }
    
    .top-left-xs {
        justify-items: left;
        align-items: start;
        display: grid;
    }
    
    .top-center-xs {
        justify-items: center;
        align-items: start;
        display: grid;
    }
    
    .top-right-xs {
        justify-items: right;
        align-items: start;
        display: grid;
    }
    
    .bottom-left-xs {
        justify-items: left;
        align-items: end;
        display: grid;
    }
    
    .bottom-center-xs {
        justify-items: center;
        align-items: end;
        display: grid;
    }
    
    .bottom-right-xs {
        justify-items: right;
        align-items: end;
        display: grid;
    }

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




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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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



  #containerS {
    position: relative;
    display: inline;
    float: left;
    width: 50%;
    padding-left: 25%;
    padding-right: 25%;
  }
  
  #containerM {
    position: relative;
    display: inline;
    float: left;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
  
    #containerL {
    position: relative;
    display: inline;
    float: left;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    }
  
  #containerP {
    position: relative;
    display: inline;
    float: left;
    width: 82%;
    padding-left: 9%;
    padding-right: 9%;
    z-index: 2;
  }

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

  #containerB {
    position: relative;
    display: inline;
    float: none;
    width: 100%;
    margin: 0 auto;
    max-width: 1800px;
}



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

.whitebg {
    background: var(--white);
}


@media only screen and (min-width: 2000px) {  
    #containerB {
        position: relative;
        display: grid;
        width: 100%;
    }
}


@media only screen and (max-width: 1500px) {  
    #containerS {
        width: 56%;
        padding-left: 22%;
        padding-right: 22%;
    }

}


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

    #containerM {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    #containerL {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    #containerP {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }

}


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

    #containerS {
        width: 66%;
        padding-left: 17%;
        padding-right: 17%;
    }

}
  

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

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

    
    #containerL {
        width: calc(100% - 2em);
        margin-left: 1em;
        margin-right: 1em;
    }
    
    /*
    .news-container {
        width: calc(100% - 2em);
        margin-left: 1em;
        margin-right: 1em;
    }
    */


}



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


    #containerS {
        width: 76%;
        padding-left: 12%;
        padding-right: 12%;
    }

}


@media only screen and (max-width: 500px) {   
   
    #containerP {
        width: calc(100% - 2em);
        padding-left: 1em;
        padding-right: 1em;
    }

    #containerM {
        width: calc(100% - 2em);
        margin-left: 1em;
        margin-right: 1em;
    }
    
    #containerT {
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
    }

    #containerS {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }
}