/* /////////// UBIQ GRID ///////////

2. GRID Container
3. ROW / COLUMNS
4. GAPS
5. SPACINGS (Margins & Paddings)
6. POSITIONING (top-left, top-right, center-left usw. )

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




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

/* fixing swiper bug */
.grid > div {
    min-width: 0;
    max-width: 100%;
}

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

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

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







/*------------------------------------------------------------------------------------------------------------------------------
                                                        1 SECTION CONTAINER
------------------------------------------------------------------------------------------------------------------------------*/

/* Edged style */
.edged {
    width: calc(100% - calc(2rem * 2));
    margin: 0 auto;
}

@media (max-width: 768px) {
    .edged {
        width: 100%;
    }
}

/* Boxed style */
.boxed {
    width: calc(calc(100% / 12 * 10) - 2rem);
    margin-left: auto;
    margin-right: auto;
    max-width: 1800px;
    grid-template-columns: repeat(12, 1fr);
}

@media (max-width: 2464px) {
    .boxed {
        width: calc(calc(calc(100% / 12 * 9) * 1.15) - 2rem);
        max-width: calc(100% - 2rem);
    }
}

@media (max-width: 768px) {
    .boxed {
        width: calc(100% - 2rem);
    }
}

/* Boxed-left style */
.boxed-left {
    width: calc(calc(100% - calc(100% - calc(100% / 12 * 10))/2) - calc(2rem / 2));
    margin-left: calc(calc(100% - calc(100% / 12 * 10))/2 + calc(2rem / 2));
    margin-right: 0;
    grid-template-columns: repeat(11, calc(calc(calc(100% / 12 * 10) - calc(2rem/2)) / 11)) 1fr;
}

@media (min-width: 2464px) {
    .boxed-left {
        margin-left: calc((100% - 1800px) / 2);
        width: calc(100% - calc((100% - 1800px) / 2 + calc(2rem/2)));
        grid-template-columns: repeat(11, calc(1800px / 12)) 1fr;
    }
}

@media (max-width: 2464px) {
    .boxed-left {
        width: calc(calc(100% - calc(100% - calc(calc(100% / 12 * 9) * 1.15))/2) - calc(2rem / 2));
        margin-left: calc(calc(100% - calc(calc(100% / 12 * 9) * 1.15))/2 + calc(2rem / 2));
        max-width: calc(100% - calc(2rem / 2));
        grid-template-columns: repeat(11, calc(calc(calc(100% - calc(100% - calc(calc(100% / 12 * 9) * 1.15))/2) - calc(2rem/2)) / 12)) 1fr;
    }
}

@media (max-width: 768px) {
    .boxed-left {
        width: calc(100% - calc(2rem / 2));
        margin-left: calc(2rem / 2);
        grid-template-columns: repeat(11, calc(calc(100% - calc(2rem/2)) / 12)) 1fr;
    }
}

/* Boxed-right style */
.boxed-right {
    width: calc(calc(100% - calc(100% - calc(100% / 12 * 9))/2) - calc(2rem / 2));
    margin-right: calc(calc(100% - calc(100% / 12 * 9))/2);
    margin-left: 0;
    grid-template-columns: repeat(11, calc(calc(calc(100% / 12 * 9) - calc(2rem/2)) / 11)) 1fr;
}

@media (min-width: 2464px) {
    .boxed-right {
        margin-right: calc((100% - 1800px) / 2 + calc(2rem/2));
        width: calc(100% - calc((100% - 1800px) / 2 + calc(2rem/2)));
        grid-template-columns: repeat(11, calc(1800px / 12)) 1fr;
    }
}

@media (max-width: 2464px) {
    .boxed-right {
        width: calc(calc(100% - calc(100% - calc(calc(100% / 12 * 9) * 1.15))/2) - calc(2rem / 2));
        margin-right: calc(calc(100% - calc(calc(100% / 12 * 9) * 1.15))/2 + calc(2rem / 2));
        max-width: calc(100% - calc(2rem / 2));
        grid-template-columns: repeat(11, calc(calc(calc(100% - calc(100% - calc(calc(100% / 12 * 9) * 1.15))/2) - calc(2rem/2)) / 12)) 1fr;
    }
}

@media (max-width: 768px) {
    .boxed-right {
        width: calc(100% - calc(2rem / 2));
        margin-right: calc(2rem / 2);
        grid-template-columns: repeat(11, calc(calc(100% - calc(2rem/2)) / 12)) 1fr;
    }
}

/* Padding-left */
.padding-left {
    padding-left: 2rem;
}

@media (max-width: 768px) {
    .padding-left {
        padding-left: calc(2rem / 2);
    }
}

/* Padding-right */
.padding-right {
    padding-right: 2rem;
}

@media (max-width: 768px) {
    .padding-right {
        padding-right: calc(2rem / 2);
    }
}

/* Margin-left */
.margin-left {
    margin-left: 2rem;
}

@media (max-width: 768px) {
    .margin-left {
        margin-left: calc(2rem / 2);
    }
}

/* Margin-right */
.margin-right {
    margin-right: 2rem;
}

@media (max-width: 768px) {
    .margin-right {
        margin-right: calc(2rem / 2);
    }
}






/*------------------------------------------------------------------------------------------------------------------------------
                                                        2 GRID CONTAINER
------------------------------------------------------------------------------------------------------------------------------*/



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

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


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


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


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


/*------------------------------------------------------------------------------------------------------------------------------
                                                        3 COLS / ROWS
------------------------------------------------------------------------------------------------------------------------------*/


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

    .col {
        grid-column: auto;
    }
    .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;
    }


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


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


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




/* ===================================== MOBILE ===================================== */




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


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

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

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

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


    /* Columns */

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


    /* Rows */

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



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


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





/*------------------------------------------------------------------------------------------------------------------------------
                                                        4 GAPS
------------------------------------------------------------------------------------------------------------------------------*/
  
.row-gap-0 {
    row-gap: 0;
}
.row-gap-1 {
    row-gap: 1rem;
}
.row-gap-2 {
    row-gap: 2rem;
}
.row-gap-3 {
    row-gap: 3rem;
}
.row-gap-4 {
    row-gap: 4rem;
}
.row-gap-5 {
    row-gap: 5rem;
}
.row-gap-6 {
    row-gap: 6rem;
}
.row-gap-7 {
    row-gap: 7rem;
}
.row-gap-8 {
    row-gap: 8rem;
}
.row-gap-9 {
    row-gap: 9rem;
}
.row-gap-10 {
    row-gap: 10rem;
}  
.row-gap-11 {
    row-gap: 11rem;
}
.row-gap-12 {
    row-gap: 12rem;
}
.row-gap-13 {
    row-gap: 13rem;
}
.row-gap-14 {
    row-gap: 14rem;
}
.row-gap-15 {
    row-gap: 15rem;
}
.row-gap-16 {
    row-gap: 16rem;
}
.row-gap-17 {
    row-gap: 17rem;
}
.row-gap-18 {
    row-gap: 18rem;
}
.row-gap-19 {
    row-gap: 19rem;
}
.row-gap-20 {
    row-gap: 20rem;
}

.column-gap-0 {
    column-gap: 0;
}
.column-gap-1 {
    column-gap: 1rem;
}
.column-gap-2 {
    column-gap: 2rem;
}
.column-gap-3 {
    column-gap: 3rem;
}
.column-gap-4 {
    column-gap: 4rem;
}
.column-gap-5 {
    column-gap: 5rem;
}
.column-gap-6 {
    column-gap: 6rem;
}
.column-gap-7 {
    column-gap: 7rem;
}
.column-gap-8 {
    column-gap: 8rem;
}
.column-gap-9 {
    column-gap: 9rem;
}
.column-gap-10 {
    column-gap: 10rem;
}





/* ===================================== GAPS MOBILE ===================================== */




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


    .row-gap-0 {
        row-gap: 0;
    }
    .row-gap-1 {
        row-gap: 0.4rem;
    }
    .row-gap-2 {
        row-gap: 0.8rem;
    }
    .row-gap-3 {
        row-gap: 1.2rem;
    }
    .row-gap-4 {
        row-gap: 1.6rem;
    }
    .row-gap-5 {
        row-gap: 2rem;
    }
    .row-gap-6 {
        row-gap: 2.4rem;
    }
    .row-gap-7 {
        row-gap: 2.8rem;
    }
    .row-gap-8 {
        row-gap: 3.2rem;
    }
    .row-gap-9 {
        row-gap: 3.6rem;
    }
    .row-gap-10 {
        row-gap: 4rem;
    }  
    .row-gap-11 {
        row-gap: 4.4rem;
    }
    .row-gap-12 {
        row-gap: 4.8rem;
    }
    .row-gap-13 {
        row-gap: 5.2rem;
    }
    .row-gap-14 {
        row-gap: 5.6rem;
    }
    .row-gap-15 {
        row-gap: 6rem;
    }
    .row-gap-16 {
        row-gap: 6.4rem;
    }
    .row-gap-17 {
        row-gap: 6.8rem;
    }
    .row-gap-18 {
        row-gap: 7.2rem;
    }
    .row-gap-19 {
        row-gap: 7.6rem;
    }
    .row-gap-20 {
        row-gap: 8rem;
    }
    
    .column-gap-0 {
        column-gap: 0;
    }
    .column-gap-1 {
        column-gap: 0.4rem;
    }
    .column-gap-2 {
        column-gap: 0.8rem;
    }
    .column-gap-3 {
        column-gap: 1.2rem;
    }
    .column-gap-4 {
        column-gap: 1.6rem;
    }
    .column-gap-5 {
        column-gap: 2rem;
    }
    .column-gap-6 {
        column-gap: 2.4rem;
    }
    .column-gap-7 {
        column-gap: 2.8rem;
    }
    .column-gap-8 {
        column-gap: 3.2rem;
    }
    .column-gap-9 {
        column-gap: 3.6rem;
    }
    .column-gap-10 {
        column-gap: 4rem;
    }


    .row-gap-m-0 {
        row-gap: 0;
    }
    .row-gap-m-1 {
        row-gap: 1rem;
    }
    .row-gap-m-2 {
        row-gap: 2rem;
    }
    .row-gap-m-3 {
        row-gap: 3rem;
    }
    .row-gap-m-4 {
        row-gap: 4rem;
    }
    .row-gap-m-5 {
        row-gap: 5rem;
    }
    .row-gap-m-6 {
        row-gap: 6rem;
    }
    .row-gap-m-7 {
        row-gap: 7rem;
    }
    .row-gap-m-8 {
        row-gap: 8rem;
    }
    .row-gap-m-9 {
        row-gap: 9rem;
    }
    .row-gap-m-10 {
        row-gap: 10rem;
    }  
    .row-gap-m-11 {
        row-gap: 11rem;
    }
    .row-gap-m-12 {
        row-gap: 12rem;
    }
    .row-gap-m-13 {
        row-gap: 13rem;
    }
    .row-gap-m-14 {
        row-gap: 14rem;
    }
    .row-gap-m-15 {
        row-gap: 15rem;
    }
    .row-gap-m-16 {
        row-gap: 16rem;
    }
    .row-gap-m-17 {
        row-gap: 17rem;
    }
    .row-gap-m-18 {
        row-gap: 18rem;
    }
    .row-gap-m-19 {
        row-gap: 19rem;
    }
    .row-gap-m-20 {
        row-gap: 20rem;
    }

    .column-gap-m-0 {
        column-gap: 0;
    }
    .column-gap-m-1 {
        column-gap: 1rem;
    }
    .column-gap-m-2 {
        column-gap: 2rem;
    }
    .column-gap-m-3 {
        column-gap: 3rem;
    }
    .column-gap-m-4 {
        column-gap: 4rem;
    }
    .column-gap-m-5 {
        column-gap: 5rem;
    }
    .column-gap-m-6 {
        column-gap: 6rem;
    }
    .column-gap-m-7 {
        column-gap: 7rem;
    }
    .column-gap-m-8 {
        column-gap: 8rem;
    }
    .column-gap-m-9 {
        column-gap: 9rem;
    }
    .column-gap-m-10 {
        column-gap: 10rem;
    }  

}









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



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


    .m-1 {
        margin: 1rem;
    }
    .m-2 {
        margin: 2rem;
    }
    .m-3 {
        margin: 3rem;
    }
    .m-4 {
        margin: 4rem;
    }
    .m-5 {
        margin: 5rem;
    }
    .m-6 {
        margin: 6rem;
    }
    .m-7 {
        margin: 7rem;
    }
    .m-8 {
        margin: 8rem;
    }
    .m-9 {
        margin: 9rem;
    }
    .m-10 {
        margin: 10rem;
    }
    .m-11 {
        margin: 11rem;
    }
    .m-12 {
        margin: 12rem;
    }
    .m-13 {
        margin: 13rem;
    }
    .m-14 {
        margin: 14rem;
    }
    .m-15 {
        margin: 15rem;
    }
    .m-16 {
        margin: 16rem;
    }
    .m-17 {
        margin: 17rem;
    }
    .m-18 {
        margin: 18rem;
    }
    .m-19 {
        margin: 19rem;
    }
    .m-20 {
        margin: 20rem;
    }
    .m-21 {
        margin: 21rem;
    }
    .m-22 {
        margin: 22rem;
    }
    .m-23 {
        margin: 23rem;
    }
    .m-24 {
        margin: 24rem;
    }
    .m-25 {
        margin: 25rem;
    }
    .m-26 {
        margin: 26rem;
    }
    .m-27 {
        margin: 27rem;
    }
    .m-28 {
        margin: 28rem;
    }
    .m-29 {
        margin: 29rem;
    }
    .m-30 {
        margin: 30rem;
    }


    .mt-1 {
        margin-top: 1rem;
    }
    .mt-2 {
        margin-top: 2rem;
    }
    .mt-3 {
        margin-top: 3rem;
    }
    .mt-4 {
        margin-top: 4rem;
    }
    .mt-5 {
        margin-top: 5rem;
    }
    .mt-6 {
        margin-top: 6rem;
    }
    .mt-7 {
        margin-top: 7rem;
    }
    .mt-8 {
        margin-top: 8rem;
    }
    .mt-9 {
        margin-top: 9rem;
    }
    .mt-10 {
        margin-top: 10rem;
    }
    .mt-11 {
        margin-top: 11rem;
    }
    .mt-12 {
        margin-top: 12rem;
    }
    .mt-13 {
        margin-top: 13rem;
    }
    .mt-14 {
        margin-top: 14rem;
    }
    .mt-15 {
        margin-top: 15rem;
    }
    .mt-16 {
        margin-top: 16rem;
    }
    .mt-17 {
        margin-top: 17rem;
    }
    .mt-18 {
        margin-top: 18rem;
    }
    .mt-19 {
        margin-top: 19rem;
    }
    .mt-20 {
        margin-top: 20rem;
    }
    .mt-21 {
        margin-top: 21rem;
    }
    .mt-22 {
        margin-top: 22rem;
    }
    .mt-23 {
        margin-top: 23rem;
    }
    .mt-24 {
        margin-top: 24rem;
    }
    .mt-25 {
        margin-top: 25rem;
    }
    .mt-26 {
        margin-top: 26rem;
    }
    .mt-27 {
        margin-top: 27rem;
    }
    .mt-28 {
        margin-top: 28rem;
    }
    .mt-29 {
        margin-top: 29rem;
    }
    .mt-30 {
        margin-top: 30rem;
    }

    .mb-1 {
        margin-bottom: 1rem;
    }
    .mb-2 {
        margin-bottom: 2rem;
    }
    .mb-3 {
        margin-bottom: 3rem;
    }
    .mb-4 {
        margin-bottom: 4rem;
    }
    .mb-5 {
        margin-bottom: 5rem;
    }
    .mb-6 {
        margin-bottom: 6rem;
    }
    .mb-7 {
        margin-bottom: 7rem;
    }
    .mb-8 {
        margin-bottom: 8rem;
    }
    .mb-9 {
        margin-bottom: 9rem;
    }
    .mb-10 {
        margin-bottom: 10rem;
    }
    .mb-11 {
        margin-bottom: 11rem;
    }
    .mb-12 {
        margin-bottom: 12rem;
    }
    .mb-13 {
        margin-bottom: 13rem;
    }
    .mb-14 {
        margin-bottom: 14rem;
    }
    .mb-15 {
        margin-bottom: 15rem;
    }
    .mb-16 {
        margin-bottom: 16rem;
    }
    .mb-17 {
        margin-bottom: 17rem;
    }
    .mb-18 {
        margin-bottom: 18rem;
    }
    .mb-19 {
        margin-bottom: 19rem;
    }
    .mb-20 {
        margin-bottom: 20rem;
    }
    .mb-21 {
        margin-bottom: 21rem;
    }
    .mb-22 {
        margin-bottom: 22rem;
    }
    .mb-23 {
        margin-bottom: 23rem;
    }
    .mb-24 {
        margin-bottom: 24rem;
    }
    .mb-25 {
        margin-bottom: 25rem;
    }
    .mb-26 {
        margin-bottom: 26rem;
    }
    .mb-27 {
        margin-bottom: 27rem;
    }
    .mb-28 {
        margin-bottom: 28rem;
    }
    .mb-29 {
        margin-bottom: 29rem;
    }
    .mb-30 {
        margin-bottom: 30rem;
    }

    .ml-1 {
        margin-left: 1rem;
    }
    .ml-2 {
        margin-left: 2rem;
    }
    .ml-3 {
        margin-left: 3rem;
    }
    .ml-4 {
        margin-left: 4rem;
    }
    .ml-5 {
        margin-left: 5rem;
    }
    .ml-6 {
        margin-left: 6rem;
    }
    .ml-7 {
        margin-left: 7rem;
    }
    .ml-8 {
        margin-left: 8rem;
    }
    .ml-9 {
        margin-left: 9rem;
    }
    .ml-10 {
        margin-left: 10rem;
    }
    .ml-11 {
        margin-left: 11rem;
    }
    .ml-12 {
        margin-left: 12rem;
    }
    .ml-13 {
        margin-left: 13rem;
    }
    .ml-14 {
        margin-left: 14rem;
    }
    .ml-15 {
        margin-left: 15rem;
    }
    .ml-16 {
        margin-left: 16rem;
    }
    .ml-17 {
        margin-left: 17rem;
    }
    .ml-18 {
        margin-left: 18rem;
    }
    .ml-19 {
        margin-left: 19rem;
    }
    .ml-20 {
        margin-left: 20rem;
    }
    .ml-21 {
        margin-left: 21rem;
    }
    .ml-22 {
        margin-left: 22rem;
    }
    .ml-23 {
        margin-left: 23rem;
    }
    .ml-24 {
        margin-left: 24rem;
    }
    .ml-25 {
        margin-left: 25rem;
    }
    .ml-26 {
        margin-left: 26rem;
    }
    .ml-27 {
        margin-left: 27rem;
    }
    .ml-28 {
        margin-left: 28rem;
    }
    .ml-29 {
        margin-left: 29rem;
    }
    .ml-30 {
        margin-left: 30rem;
    }

    .mr-1 {
        margin-right: 1rem;
    }
    .mr-2 {
        margin-right: 2rem;
    }
    .mr-3 {
        margin-right: 3rem;
    }
    .mr-4 {
        margin-right: 4rem;
    }
    .mr-5 {
        margin-right: 5rem;
    }
    .mr-6 {
        margin-right: 6rem;
    }
    .mr-7 {
        margin-right: 7rem;
    }
    .mr-8 {
        margin-right: 8rem;
    }
    .mr-9 {
        margin-right: 9rem;
    }
    .mr-10 {
        margin-right: 10rem;
    }
    .mr-11 {
        margin-right: 11rem;
    }
    .mr-12 {
        margin-right: 12rem;
    }
    .mr-13 {
        margin-right: 13rem;
    }
    .mr-14 {
        margin-right: 14rem;
    }
    .mr-15 {
        margin-right: 15rem;
    }
    .mr-16 {
        margin-right: 16rem;
    }
    .mr-17 {
        margin-right: 17rem;
    }
    .mr-18 {
        margin-right: 18rem;
    }
    .mr-19 {
        margin-right: 19rem;
    }
    .mr-20 {
        margin-right: 20rem;
    }
    .mr-21 {
        margin-right: 21rem;
    }
    .mr-22 {
        margin-right: 22rem;
    }
    .mr-23 {
        margin-right: 23rem;
    }
    .mr-24 {
        margin-right: 24rem;
    }
    .mr-25 {
        margin-right: 25rem;
    }
    .mr-26 {
        margin-right: 26rem;
    }
    .mr-27 {
        margin-right: 27rem;
    }
    .mr-28 {
        margin-right: 28rem;
    }
    .mr-29 {
        margin-right: 29rem;
    }
    .mr-30 {
        margin-right: 30rem;
    }




    .my-1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .my-2 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .my-3 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    .my-4 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .my-5 {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
    .my-6 {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .my-7 {
        margin-top: 7rem;
        margin-bottom: 7rem;
    }
    .my-8 {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
    .my-9 {
        margin-top: 9rem;
        margin-bottom: 9rem;
    }
    .my-10 {
        margin-top: 10rem;
        margin-bottom: 10rem;
    }
    .my-11 {
        margin-top: 11rem;
        margin-bottom: 11rem;
    }
    .my-12 {
        margin-top: 12rem;
        margin-bottom: 12rem;
    }
    .my-13 {
        margin-top: 13rem;
        margin-bottom: 13rem;
    }
    .my-14 {
        margin-top: 14rem;
        margin-bottom: 14rem;
    }
    .my-15 {
        margin-top: 15rem;
        margin-bottom: 15rem;
    }
    .my-16 {
        margin-top: 16rem;
        margin-bottom: 16rem;
    }
    .my-17 {
        margin-top: 17rem;
        margin-bottom: 17rem;
    }
    .my-18 {
        margin-top: 18rem;
        margin-bottom: 18rem;
    }
    .my-19 {
        margin-top: 19rem;
        margin-bottom: 19rem;
    }
    .my-20 {
        margin-top: 20rem;
        margin-bottom: 20rem;
    }
    .my-21 {
        margin-top: 21rem;
        margin-bottom: 21rem;
    }
    .my-22 {
        margin-top: 22rem;
        margin-bottom: 22rem;
    }
    .my-23 {
        margin-top: 23rem;
        margin-bottom: 23rem;
    }
    .my-24 {
        margin-top: 24rem;
        margin-bottom: 24rem;
    }
    .my-25 {
        margin-top: 25rem;
        margin-bottom: 25rem;
    }
    .my-26 {
        margin-top: 26rem;
        margin-bottom: 26rem;
    }
    .my-27 {
        margin-top: 27rem;
        margin-bottom: 27rem;
    }
    .my-28 {
        margin-top: 28rem;
        margin-bottom: 28rem;
    }
    .my-29 {
        margin-top: 29rem;
        margin-bottom: 29rem;
    }
    .my-30 {
        margin-top: 30rem;
        margin-bottom: 30rem;
    }


    .mx-1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .mx-2 {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .mx-3 {
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .mx-4 {
        margin-left: 4rem;
        margin-right: 4rem;
    }
    .mx-5 {
        margin-left: 5rem;
        margin-right: 5rem;
    }
    .mx-6 {
        margin-left: 6rem;
        margin-right: 6rem;
    }
    .mx-7 {
        margin-left: 7rem;
        margin-right: 7rem;
    }
    .mx-8 {
        margin-left: 8rem;
        margin-right: 8rem;
    }
    .mx-9 {
        margin-left: 9rem;
        margin-right: 9rem;
    }
    .mx-10 {
        margin-left: 10rem;
        margin-right: 10rem;
    }
    .mx-11 {
        margin-left: 11rem;
        margin-right: 11rem;
    }
    .mx-12 {
        margin-left: 12rem;
        margin-right: 12rem;
    }
    .mx-13 {
        margin-left: 13rem;
        margin-right: 13rem;
    }
    .mx-14 {
        margin-left: 14rem;
        margin-right: 14rem;
    }
    .mx-15 {
        margin-left: 15rem;
        margin-right: 15rem;
    }
    .mx-16 {
        margin-left: 16rem;
        margin-right: 16rem;
    }
    .mx-17 {
        margin-left: 17rem;
        margin-right: 17rem;
    }
    .mx-18 {
        margin-left: 18rem;
        margin-right: 18rem;
    }
    .mx-19 {
        margin-left: 19rem;
        margin-right: 19rem;
    }
    .mx-20 {
        margin-left: 20rem;
        margin-right: 20rem;
    }
    .mx-21 {
        margin-left: 21rem;
        margin-right: 21rem;
    }
    .mx-22 {
        margin-left: 22rem;
        margin-right: 22rem;
    }
    .mx-23 {
        margin-left: 23rem;
        margin-right: 23rem;
    }
    .mx-24 {
        margin-left: 24rem;
        margin-right: 24rem;
    }
    .mx-25 {
        margin-left: 25rem;
        margin-right: 25rem;
    }
    .mx-26 {
        margin-left: 26rem;
        margin-right: 26rem;
    }
    .mx-27 {
        margin-left: 27rem;
        margin-right: 27rem;
    }
    .mx-28 {
        margin-left: 28rem;
        margin-right: 28rem;
    }
    .mx-29 {
        margin-left: 29rem;
        margin-right: 29rem;
    }
    .mx-30 {
        margin-left: 30rem;
        margin-right: 30rem;
    }




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


    .p-0 {
        padding: 0;
    }
    .p-1 {
        padding: 1rem;
    }
    .p-2 {
        padding: 2rem;
    }
    .p-3 {
        padding: 3rem;
    }
    .p-4 {
        padding: 4rem;
    }
    .p-5 {
        padding: 5rem;
    }
    .p-6 {
        padding: 6rem;
    }
    .p-7 {
        padding: 7rem;
    }
    .p-8 {
        padding: 8rem;
    }
    .p-9 {
        padding: 9rem;
    }
    .p-10 {
        padding: 10rem;
    }
    .p-11 {
        padding: 11rem;
    }
    .p-12 {
        padding: 12rem;
    }
    .p-13 {
        padding: 13rem;
    }
    .p-14 {
        padding: 14rem;
    }
    .p-15 {
        padding: 15rem;
    }
    .p-16 {
        padding: 16rem;
    }
    .p-17 {
        padding: 17rem;
    }
    .p-18 {
        padding: 18rem;
    }
    .p-19 {
        padding: 19rem;
    }
    .p-20 {
        padding: 20rem;
    }
    .p-21 {
        padding: 21rem;
    }
    .p-22 {
        padding: 22rem;
    }
    .p-23 {
        padding: 23rem;
    }
    .p-24 {
        padding: 24rem;
    }
    .p-25 {
        padding: 25rem;
    }
    .p-26 {
        padding: 26rem;
    }
    .p-27 {
        padding: 27rem;
    }
    .p-28 {
        padding: 28rem;
    }
    .p-29 {
        padding: 29rem;
    }
    .p-30 {
        padding: 30rem;
    }


    .pt-0 {
        padding-top: 0;
    }
    .pt-1 {
        padding-top: 1rem;
    }
    .pt-2 {
        padding-top: 2rem;
    }
    .pt-3 {
        padding-top: 3rem;
    }
    .pt-4 {
        padding-top: 4rem;
    }
    .pt-5 {
        padding-top: 5rem;
    }
    .pt-6 {
        padding-top: 6rem;
    }
    .pt-7 {
        padding-top: 7rem;
    }
    .pt-8 {
        padding-top: 8rem;
    }
    .pt-9 {
        padding-top: 9rem;
    }
    .pt-10 {
        padding-top: 10rem;
    }
    .pt-11 {
        padding-top: 11rem;
    }
    .pt-12 {
        padding-top: 12rem;
    }
    .pt-13 {
        padding-top: 13rem;
    }
    .pt-14 {
        padding-top: 14rem;
    }
    .pt-15 {
        padding-top: 15rem;
    }
    .pt-16 {
        padding-top: 16rem;
    }
    .pt-17 {
        padding-top: 17rem;
    }
    .pt-18 {
        padding-top: 18rem;
    }
    .pt-19 {
        padding-top: 19rem;
    }
    .pt-20 {
        padding-top: 20rem;
    }
    .pt-21 {
        padding-top: 21rem;
    }
    .pt-22 {
        padding-top: 22rem;
    }
    .pt-23 {
        padding-top: 23rem;
    }
    .pt-24 {
        padding-top: 24rem;
    }
    .pt-25 {
        padding-top: 25rem;
    }
    .pt-26 {
        padding-top: 26rem;
    }
    .pt-27 {
        padding-top: 27rem;
    }
    .pt-28 {
        padding-top: 28rem;
    }
    .pt-29 {
        padding-top: 29rem;
    }
    .pt-30 {
        padding-top: 30rem;
    }



    .pb-0 {
        padding-bottom: 0;
    }
    .pb-1 {
        padding-bottom: 1rem;
    }
    .pb-2 {
        padding-bottom: 2rem;
    }
    .pb-3 {
        padding-bottom: 3rem;
    }
    .pb-4 {
        padding-bottom: 4rem;
    }
    .pb-5 {
        padding-bottom: 5rem;
    }
    .pb-6 {
        padding-bottom: 6rem;
    }
    .pb-7 {
        padding-bottom: 7rem;
    }
    .pb-8 {
        padding-bottom: 8rem;
    }
    .pb-9 {
        padding-bottom: 9rem;
    }
    .pb-10 {
        padding-bottom: 10rem;
    }
    .pb-11 {
        padding-bottom: 11rem;
    }
    .pb-12 {
        padding-bottom: 12rem;
    }
    .pb-13 {
        padding-bottom: 13rem;
    }
    .pb-14 {
        padding-bottom: 14rem;
    }
    .pb-15 {
        padding-bottom: 15rem;
    }
    .pb-16 {
        padding-bottom: 16rem;
    }
    .pb-17 {
        padding-bottom: 17rem;
    }
    .pb-18 {
        padding-bottom: 18rem;
    }
    .pb-19 {
        padding-bottom: 19rem;
    }
    .pb-20 {
        padding-bottom: 20rem;
    }
    .pb-21 {
        padding-bottom: 21rem;
    }
    .pb-22 {
        padding-bottom: 22rem;
    }
    .pb-23 {
        padding-bottom: 23rem;
    }
    .pb-24 {
        padding-bottom: 24rem;
    }
    .pb-25 {
        padding-bottom: 25rem;
    }
    .pb-26 {
        padding-bottom: 26rem;
    }
    .pb-27 {
        padding-bottom: 27rem;
    }
    .pb-28 {
        padding-bottom: 28rem;
    }
    .pb-29 {
        padding-bottom: 29rem;
    }
    .pb-30 {
        padding-bottom: 30rem;
    }



    .pl-0 {
        padding-left: 0;
    }
    .pl-1 {
        padding-left: 1rem;
    }
    .pl-2 {
        padding-left: 2rem;
    }
    .pl-3 {
        padding-left: 3rem;
    }
    .pl-4 {
        padding-left: 4rem;
    }
    .pl-5 {
        padding-left: 5rem;
    }
    .pl-6 {
        padding-left: 6rem;
    }
    .pl-7 {
        padding-left: 7rem;
    }
    .pl-8 {
        padding-left: 8rem;
    }
    .pl-9 {
        padding-left: 9rem;
    }
    .pl-10 {
        padding-left: 10rem;
    }
    .pl-11 {
        padding-left: 11rem;
    }
    .pl-12 {
        padding-left: 12rem;
    }
    .pl-13 {
        padding-left: 13rem;
    }
    .pl-14 {
        padding-left: 14rem;
    }
    .pl-15 {
        padding-left: 15rem;
    }
    .pl-16 {
        padding-left: 16rem;
    }
    .pl-17 {
        padding-left: 17rem;
    }
    .pl-18 {
        padding-left: 18rem;
    }
    .pl-19 {
        padding-left: 19rem;
    }
    .pl-20 {
        padding-left: 20rem;
    }
    .pl-21 {
        padding-left: 21rem;
    }
    .pl-22 {
        padding-left: 22rem;
    }
    .pl-23 {
        padding-left: 23rem;
    }
    .pl-24 {
        padding-left: 24rem;
    }
    .pl-25 {
        padding-left: 25rem;
    }
    .pl-26 {
        padding-left: 26rem;
    }
    .pl-27 {
        padding-left: 27rem;
    }
    .pl-28 {
        padding-left: 28rem;
    }
    .pl-29 {
        padding-left: 29rem;
    }
    .pl-30 {
        padding-left: 30rem;
    }



    .pr-0 {
        padding-right: 0;
    }
    .pr-1 {
        padding-right: 1rem;
    }
    .pr-2 {
        padding-right: 2rem;
    }
    .pr-3 {
        padding-right: 3rem;
    }
    .pr-4 {
        padding-right: 4rem;
    }
    .pr-5 {
        padding-right: 5rem;
    }
    .pr-6 {
        padding-right: 6rem;
    }
    .pr-7 {
        padding-right: 7rem;
    }
    .pr-8 {
        padding-right: 8rem;
    }
    .pr-9 {
        padding-right: 9rem;
    }
    .pr-10 {
        padding-right: 10rem;
    }
    .pr-11 {
        padding-right: 11rem;
    }
    .pr-12 {
        padding-right: 12rem;
    }
    .pr-13 {
        padding-right: 13rem;
    }
    .pr-14 {
        padding-right: 14rem;
    }
    .pr-15 {
        padding-right: 15rem;
    }
    .pr-16 {
        padding-right: 16rem;
    }
    .pr-17 {
        padding-right: 17rem;
    }
    .pr-18 {
        padding-right: 18rem;
    }
    .pr-19 {
        padding-right: 19rem;
    }
    .pr-20 {
        padding-right: 20rem;
    }
    .pr-21 {
        padding-right: 21rem;
    }
    .pr-22 {
        padding-right: 22rem;
    }
    .pr-23 {
        padding-right: 23rem;
    }
    .pr-24 {
        padding-right: 24rem;
    }
    .pr-25 {
        padding-right: 25rem;
    }
    .pr-26 {
        padding-right: 26rem;
    }
    .pr-27 {
        padding-right: 27rem;
    }
    .pr-28 {
        padding-right: 28rem;
    }
    .pr-29 {
        padding-right: 29rem;
    }
    .pr-30 {
        padding-right: 30rem;
    }




    .py-1 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .py-2 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .py-3 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .py-4 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .py-5 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .py-6 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .py-7 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .py-8 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .py-9 {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }
    .py-10 {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    .py-11 {
        padding-top: 11rem;
        padding-bottom: 11rem;
    }
    .py-12 {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    .py-13 {
        padding-top: 13rem;
        padding-bottom: 13rem;
    }
    .py-14 {
        padding-top: 14rem;
        padding-bottom: 14rem;
    }
    .py-15 {
        padding-top: 15rem;
        padding-bottom: 15rem;
    }
    .py-16 {
        padding-top: 16rem;
        padding-bottom: 16rem;
    }
    .py-17 {
        padding-top: 17rem;
        padding-bottom: 17rem;
    }
    .py-18 {
        padding-top: 18rem;
        padding-bottom: 18rem;
    }
    .py-19 {
        padding-top: 19rem;
        padding-bottom: 19rem;
    }
    .py-20 {
        padding-top: 20rem;
        padding-bottom: 20rem;
    }
    .py-21 {
        padding-top: 21rem;
        padding-bottom: 21rem;
    }
    .py-22 {
        padding-top: 22rem;
        padding-bottom: 22rem;
    }
    .py-23 {
        padding-top: 23rem;
        padding-bottom: 23rem;
    }
    .py-24 {
        padding-top: 24rem;
        padding-bottom: 24rem;
    }
    .py-25 {
        padding-top: 25rem;
        padding-bottom: 25rem;
    }
    .py-26 {
        padding-top: 26rem;
        padding-bottom: 26rem;
    }
    .py-27 {
        padding-top: 27rem;
        padding-bottom: 27rem;
    }
    .py-28 {
        padding-top: 28rem;
        padding-bottom: 28rem;
    }
    .py-29 {
        padding-top: 29rem;
        padding-bottom: 29rem;
    }
    .py-30 {
        padding-top: 30rem;
        padding-bottom: 30rem;
    }


    .px-1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .px-2 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .px-3 {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .px-4 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .px-5 {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .px-6 {
        padding-left: 6rem;
        padding-right: 6rem;
    }
    .px-7 {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    .px-8 {
        padding-left: 8rem;
        padding-right: 8rem;
    }
    .px-9 {
        padding-left: 9rem;
        padding-right: 9rem;
    }
    .px-10 {
        padding-left: 10rem;
        padding-right: 10rem;
    }
    .px-11 {
        padding-left: 11rem;
        padding-right: 11rem;
    }
    .px-12 {
        padding-left: 12rem;
        padding-right: 12rem;
    }
    .px-13 {
        padding-left: 13rem;
        padding-right: 13rem;
    }
    .px-14 {
        padding-left: 14rem;
        padding-right: 14rem;
    }
    .px-15 {
        padding-left: 15rem;
        padding-right: 15rem;
    }
    .px-16 {
        padding-left: 16rem;
        padding-right: 16rem;
    }
    .px-17 {
        padding-left: 17rem;
        padding-right: 17rem;
    }
    .px-18 {
        padding-left: 18rem;
        padding-right: 18rem;
    }
    .px-19 {
        padding-left: 19rem;
        padding-right: 19rem;
    }
    .px-20 {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .px-21 {
        padding-left: 21rem;
        padding-right: 21rem;
    }
    .px-22 {
        padding-left: 22rem;
        padding-right: 22rem;
    }
    .px-23 {
        padding-left: 23rem;
        padding-right: 23rem;
    }
    .px-24 {
        padding-left: 24rem;
        padding-right: 24rem;
    }
    .px-25 {
        padding-left: 25rem;
        padding-right: 25rem;
    }
    .px-26 {
        padding-left: 26rem;
        padding-right: 26rem;
    }
    .px-27 {
        padding-left: 27rem;
        padding-right: 27rem;
    }
    .px-28 {
        padding-left: 28rem;
        padding-right: 28rem;
    }
    .px-29 {
        padding-left: 29rem;
        padding-right: 29rem;
    }
    .px-30 {
        padding-left: 30rem;
        padding-right: 30rem;
    }




/* ===================================== MOBILE ===================================== */


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


        .m-1 {
            margin: 0.4rem;
        }
        .m-2 {
            margin: 0.8rem;
        }
        .m-3 {
            margin: 1.2rem;
        }
        .m-4 {
            margin: 1.6rem;
        }
        .m-5 {
            margin: 2rem;
        }
        .m-6 {
            margin: 2.4rem;
        }
        .m-7 {
            margin: 2.8rem;
        }
        .m-8 {
            margin: 3.2rem;
        }
        .m-9 {
            margin: 3.6rem;
        }
        .m-10 {
            margin: 4em;
        }
        .m-11 {
            margin: 4.4rem;
        }
        .m-12 {
            margin: 4.8rem;
        }
        .m-13 {
            margin: 5.2rem;
        }
        .m-14 {
            margin: 5.6rem;
        }
        .m-15 {
            margin: 6rem;
        }
        .m-16 {
            margin: 6.4rem;
        }
        .m-17 {
            margin: 6.8rem;
        }
        .m-18 {
            margin: 7.2rem;
        }
        .m-19 {
            margin: 7.6rem;
        }
        .m-20 {
            margin: 8rem;
        }
        .m-21 {
            margin: 8.4rem;
        }
        .m-22 {
            margin: 8.8rem;
        }
        .m-23 {
            margin: 9.2rem;
        }
        .m-24 {
            margin: 9.6rem;
        }
        .m-25 {
            margin: 10rem;
        }
        .m-26 {
            margin: 10.4rem;
        }
        .m-27 {
            margin: 10.8rem;
        }
        .m-28 {
            margin: 11.2rem;
        }
        .m-29 {
            margin: 11.6rem;
        }
        .m-30 {
            margin: 12rem;
        }


        .mt-1 {
            margin-top: 0.4rem;
        }
        .mt-2 {
            margin-top: 0.8rem;
        }
        .mt-3 {
            margin-top: 1.2rem;
        }
        .mt-4 {
            margin-top: 1.6rem;
        }
        .mt-5 {
            margin-top: 2rem;
        }
        .mt-6 {
            margin-top: 2.4rem;
        }
        .mt-7 {
            margin-top: 2.8rem;
        }
        .mt-8 {
            margin-top: 3.2rem;
        }
        .mt-9 {
            margin-top: 3.6rem;
        }
        .mt-10 {
            margin-top: 4rem;
        }
        .mt-11 {
            margin-top: 4.4rem;
        }
        .mt-12 {
            margin-top: 4.8rem;
        }
        .mt-13 {
            margin-top: 5.2rem;
        }
        .mt-14 {
            margin-top: 5.6rem;
        }
        .mt-15 {
            margin-top: 6rem;
        }
        .mt-16 {
            margin-top: 6.4rem;
        }
        .mt-17 {
            margin-top: 6.8rem;
        }
        .mt-18 {
            margin-top: 7.2rem;
        }
        .mt-19 {
            margin-top: 7.6rem;
        }
        .mt-20 {
            margin-top: 8rem;
        }
        .mt-21 {
            margin-top: 8.4rem;
        }
        .mt-22 {
            margin-top: 8.8rem;
        }
        .mt-23 {
            margin-top: 9.2rem;
        }
        .mt-24 {
            margin-top: 9.6rem;
        }
        .mt-25 {
            margin-top: 10rem;
        }
        .mt-26 {
            margin-top: 10.4rem;
        }
        .mt-27 {
            margin-top: 10.8rem;
        }
        .mt-28 {
            margin-top: 11.2rem;
        }
        .mt-29 {
            margin-top: 11.6rem;
        }
        .mt-30 {
            margin-top: 12rem;
        }

        .mb-1 {
            margin-bottom: 0.4rem;
        }
        .mb-2 {
            margin-bottom: 0.8rem;
        }
        .mb-3 {
            margin-bottom: 1.2rem;
        }
        .mb-4 {
            margin-bottom: 1.6rem;
        }
        .mb-5 {
            margin-bottom: 2rem;
        }
        .mb-6 {
            margin-bottom: 2.4rem;
        }
        .mb-7 {
            margin-bottom: 2.8rem;
        }
        .mb-8 {
            margin-bottom: 3.2rem;
        }
        .mb-9 {
            margin-bottom: 3.6rem;
        }
        .mb-10 {
            margin-bottom: 4rem;
        }
        .mb-11 {
            margin-bottom: 4.4rem;
        }
        .mb-12 {
            margin-bottom: 4.8rem;
        }
        .mb-13 {
            margin-bottom: 5.2rem;
        }
        .mb-14 {
            margin-bottom: 5.6rem;
        }
        .mb-15 {
            margin-bottom: 6rem;
        }
        .mb-16 {
            margin-bottom: 6.4rem;
        }
        .mb-17 {
            margin-bottom: 6.8rem;
        }
        .mb-18 {
            margin-bottom: 7.2rem;
        }
        .mb-19 {
            margin-bottom: 7.6rem;
        }
        .mb-20 {
            margin-bottom: 8rem;
        }
        .mb-21 {
            margin-bottom: 8.4rem;
        }
        .mb-22 {
            margin-bottom: 8.8rem;
        }
        .mb-23 {
            margin-bottom: 9.2rem;
        }
        .mb-24 {
            margin-bottom: 9.6rem;
        }
        .mb-25 {
            margin-bottom: 10rem;
        }
        .mb-26 {
            margin-bottom: 10.4rem;
        }
        .mb-27 {
            margin-bottom: 10.8rem;
        }
        .mb-28 {
            margin-bottom: 11.2rem;
        }
        .mb-29 {
            margin-bottom: 11.6rem;
        }
        .mb-30 {
            margin-bottom: 12rem;
        }

        .ml-1 {
            margin-left: 0.4rem;
        }
        .ml-2 {
            margin-left: 0.8rem;
        }
        .ml-3 {
            margin-left: 1.2rem;
        }
        .ml-4 {
            margin-left: 1.6rem;
        }
        .ml-5 {
            margin-left: 2rem;
        }
        .ml-6 {
            margin-left: 2.4rem;
        }
        .ml-7 {
            margin-left: 2.8rem;
        }
        .ml-8 {
            margin-left: 3.2rem;
        }
        .ml-9 {
            margin-left: 3.6rem;
        }
        .ml-10 {
            margin-left: 4rem;
        }
        .ml-11 {
            margin-left: 4.4rem;
        }
        .ml-12 {
            margin-left: 4.8rem;
        }
        .ml-13 {
            margin-left: 5.2rem;
        }
        .ml-14 {
            margin-left: 5.6rem;
        }
        .ml-15 {
            margin-left: 6rem;
        }
        .ml-16 {
            margin-left: 6.4rem;
        }
        .ml-17 {
            margin-left: 6.8rem;
        }
        .ml-18 {
            margin-left: 7.2rem;
        }
        .ml-19 {
            margin-left: 7.6rem;
        }
        .ml-20 {
            margin-left: 8rem;
        }
        .ml-21 {
            margin-left: 8.4rem;
        }
        .ml-22 {
            margin-left: 8.8rem;
        }
        .ml-23 {
            margin-left: 9.2rem;
        }
        .ml-24 {
            margin-left: 9.6rem;
        }
        .ml-25 {
            margin-left: 10rem;
        }
        .ml-26 {
            margin-left: 10.4rem;
        }
        .ml-27 {
            margin-left: 10.8rem;
        }
        .ml-28 {
            margin-left: 11.2rem;
        }
        .ml-29 {
            margin-left: 11.6rem;
        }
        .ml-30 {
            margin-left: 12rem;
        }

        .mr-1 {
            margin-right: 0.4rem;
        }
        .mr-2 {
            margin-right: 0.8rem;
        }
        .mr-3 {
            margin-right: 1.2rem;
        }
        .mr-4 {
            margin-right: 1.6rem;
        }
        .mr-5 {
            margin-right: 2rem;
        }
        .mr-6 {
            margin-right: 2.4rem;
        }
        .mr-7 {
            margin-right: 2.8rem;
        }
        .mr-8 {
            margin-right: 3.2rem;
        }
        .mr-9 {
            margin-right: 3.6rem;
        }
        .mr-10 {
            margin-right: 4rem;
        }
        .mr-11 {
            margin-right: 4.4rem;
        }
        .mr-12 {
            margin-right: 4.8rem;
        }
        .mr-13 {
            margin-right: 5.2rem;
        }
        .mr-14 {
            margin-right: 5.6rem;
        }
        .mr-15 {
            margin-right: 6rem;
        }
        .mr-16 {
            margin-right: 6.4rem;
        }
        .mr-17 {
            margin-right: 6.8rem;
        }
        .mr-18 {
            margin-right: 7.2rem;
        }
        .mr-19 {
            margin-right: 7.6rem;
        }
        .mr-20 {
            margin-right: 8rem;
        }
        .mr-21 {
            margin-right: 8.4rem;
        }
        .mr-22 {
            margin-right: 8.8rem;
        }
        .mr-23 {
            margin-right: 9.2rem;
        }
        .mr-24 {
            margin-right: 9.6rem;
        }
        .mr-25 {
            margin-right: 10rem;
        }
        .mr-26 {
            margin-right: 10.4rem;
        }
        .mr-27 {
            margin-right: 10.8rem;
        }
        .mr-28 {
            margin-right: 11.2rem;
        }
        .mr-29 {
            margin-right: 11.6rem;
        }
        .mr-30 {
            margin-right: 12rem;
        }


        .my-1 {
            margin-top: 0.4rem;
            margin-bottom: 0.4rem;
        }
        .my-2 {
            margin-top: 0.8rem;
            margin-bottom: 0.8rem;
        }
        .my-3 {
            margin-top: 1.2rem;
            margin-bottom: 1.2rem;
        }
        .my-4 {
            margin-top: 1.6rem;
            margin-bottom: 1.6rem;
        }
        .my-5 {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        .my-6 {
            margin-top: 2.4rem;
            margin-bottom: 2.4rem;
        }
        .my-7 {
            margin-top: 2.8rem;
            margin-bottom: 2.8rem;
        }
        .my-8 {
            margin-top: 3.2rem;
            margin-bottom: 3.2rem;
        }
        .my-9 {
            margin-top: 3.6rem;
            margin-bottom: 3.6rem;
        }
        .my-10 {
            margin-top: 4rem;
            margin-bottom: 4rem;
        }
        .my-11 {
            margin-top: 4.4rem;
            margin-bottom: 4.4rem;
        }
        .my-12 {
            margin-top: 4.8rem;
            margin-bottom: 4.8rem;
        }
        .my-13 {
            margin-top: 5.2rem;
            margin-bottom: 5.2rem;
        }
        .my-14 {
            margin-top: 5.6rem;
            margin-bottom: 5.6rem;
        }
        .my-15 {
            margin-top: 6rem;
            margin-bottom: 6rem;
        }
        .my-16 {
            margin-top: 6.4rem;
            margin-bottom: 6.4rem;
        }
        .my-17 {
            margin-top: 6.8rem;
            margin-bottom: 6.8rem;
        }
        .my-18 {
            margin-top: 7.2rem;
            margin-bottom: 7.2rem;
        }
        .my-19 {
            margin-top: 7.6rem;
            margin-bottom: 7.6rem;
        }
        .my-20 {
            margin-top: 8rem;
            margin-bottom: 8rem;
        }
        .my-21 {
            margin-top: 8.4rem;
            margin-bottom: 8.4rem;
        }
        .my-22 {
            margin-top: 8.8rem;
            margin-bottom: 8.8rem;
        }
        .my-23 {
            margin-top: 9.2rem;
            margin-bottom: 9.2rem;
        }
        .my-24 {
            margin-top: 9.6rem;
            margin-bottom: 9.6rem;
        }
        .my-25 {
            margin-top: 10rem;
            margin-bottom: 10rem;
        }
        .my-26 {
            margin-top: 10.4rem;
            margin-bottom: 10.4rem;
        }
        .my-27 {
            margin-top: 10.8rem;
            margin-bottom: 10.8rem;
        }
        .my-28 {
            margin-top: 11.2rem;
            margin-bottom: 11.2rem;
        }
        .my-29 {
            margin-top: 11.6rem;
            margin-bottom: 11.6rem;
        }
        .my-30 {
            margin-top: 12rem;
            margin-bottom: 12rem;
        }



        .mx-1 {
            margin-left: 0.4rem;
            margin-right: 0.4rem;
        }
        .mx-2 {
            margin-left: 0.8rem;
            margin-right: 0.8rem;
        }
        .mx-3 {
            margin-left: 1.2rem;
            margin-right: 1.2rem;
        }
        .mx-4 {
            margin-left: 1.6rem;
            margin-right: 1.6rem;
        }
        .mx-5 {
            margin-left: 2rem;
            margin-right: 2rem;
        }
        .mx-6 {
            margin-left: 2.4rem;
            margin-right: 2.4rem;
        }
        .mx-7 {
            margin-left: 2.8rem;
            margin-right: 2.8rem;
        }
        .mx-8 {
            margin-left: 3.2rem;
            margin-right: 3.2rem;
        }
        .mx-9 {
            margin-left: 3.6rem;
            margin-right: 3.6rem;
        }
        .mx-10 {
            margin-left: 4rem;
            margin-right: 4rem;
        }
        .mx-11 {
            margin-left: 4.4rem;
            margin-right: 4.4rem;
        }
        .mx-12 {
            margin-left: 4.8rem;
            margin-right: 4.8rem;
        }
        .mx-13 {
            margin-left: 5.2rem;
            margin-right: 5.2rem;
        }
        .mx-14 {
            margin-left: 5.6rem;
            margin-right: 5.6rem;
        }
        .mx-15 {
            margin-left: 6rem;
            margin-right: 6rem;
        }
        .mx-16 {
            margin-left: 6.4rem;
            margin-right: 6.4rem;
        }
        .mx-17 {
            margin-left: 6.8rem;
            margin-right: 6.8rem;
        }
        .mx-18 {
            margin-left: 7.2rem;
            margin-right: 7.2rem;
        }
        .mx-19 {
            margin-left: 7.6rem;
            margin-right: 7.6rem;
        }
        .mx-20 {
            margin-left: 8rem;
            margin-right: 8rem;
        }
        .mx-21 {
            margin-left: 8.4rem;
            margin-right: 8.4rem;
        }
        .mx-22 {
            margin-left: 8.8rem;
            margin-right: 8.8rem;
        }
        .mx-23 {
            margin-left: 9.2rem;
            margin-right: 9.2rem;
        }
        .mx-24 {
            margin-left: 9.6rem;
            margin-right: 9.6rem;
        }
        .mx-25 {
            margin-left: 10rem;
            margin-right: 10rem;
        }
        .mx-26 {
            margin-left: 10.4rem;
            margin-right: 10.4rem;
        }
        .mx-27 {
            margin-left: 10.8rem;
            margin-right: 10.8rem;
        }
        .mx-28 {
            margin-left: 11.2rem;
            margin-right: 11.2rem;
        }
        .mx-29 {
            margin-left: 11.6rem;
            margin-right: 11.6rem;
        }
        .mx-30 {
            margin-left: 12rem;
            margin-right: 12rem;
        }




        .p-1 {
            padding: 0.4rem;
        }
        .p-2 {
            padding: 0.8rem;
        }
        .p-3 {
            padding: 1.2rem;
        }
        .p-4 {
            padding: 1.6rem;
        }
        .p-5 {
            padding: 2rem;
        }
        .p-6 {
            padding: 2.4rem;
        }
        .p-7 {
            padding: 2.8rem;
        }
        .p-8 {
            padding: 3.2rem;
        }
        .p-9 {
            padding: 3.6rem;
        }
        .p-10 {
            padding: 4rem;
        }
        .p-11 {
            padding: 4.4rem;
        }
        .p-12 {
            padding: 4.8rem;
        }
        .p-13 {
            padding: 5.2rem;
        }
        .p-14 {
            padding: 5.6rem;
        }
        .p-15 {
            padding: 6rem;
        }
        .p-16 {
            padding: 6.4rem;
        }
        .p-17 {
            padding: 6.8rem;
        }
        .p-18 {
            padding: 7.2rem;
        }
        .p-19 {
            padding: 7.6rem;
        }
        .p-20 {
            padding: 8rem;
        }
        .p-21 {
            padding: 8.4rem;
        }
        .p-22 {
            padding: 8.8rem;
        }
        .p-23 {
            padding: 9.2rem;
        }
        .p-24 {
            padding: 9.6rem;
        }
        .p-25 {
            padding: 10rem;
        }
        .p-26 {
            padding: 10.4rem;
        }
        .p-27 {
            padding: 10.8rem;
        }
        .p-28 {
            padding: 11.2rem;
        }
        .p-29 {
            padding: 11.6rem;
        }
        .p-30 {
            padding: 12rem;
        }


        .pt-1 {
            padding-top: 0.4rem;
        }
        .pt-2 {
            padding-top: 0.8rem;
        }
        .pt-3 {
            padding-top: 1.2rem;
        }
        .pt-4 {
            padding-top: 1.6rem;
        }
        .pt-5 {
            padding-top: 2rem;
        }
        .pt-6 {
            padding-top: 2.4rem;
        }
        .pt-7 {
            padding-top: 2.8rem;
        }
        .pt-8 {
            padding-top: 3.2rem;
        }
        .pt-9 {
            padding-top: 3.6rem;
        }
        .pt-10 {
            padding-top: 4rem;
        }
        .pt-11 {
            padding-top: 4.4rem;
        }
        .pt-12 {
            padding-top: 4.8rem;
        }
        .pt-13 {
            padding-top: 5.2rem;
        }
        .pt-14 {
            padding-top: 5.6rem;
        }
        .pt-15 {
            padding-top: 6rem;
        }
        .pt-16 {
            padding-top: 6.4rem;
        }
        .pt-17 {
            padding-top: 6.8rem;
        }
        .pt-18 {
            padding-top: 7.2rem;
        }
        .pt-19 {
            padding-top: 7.6rem;
        }
        .pt-20 {
            padding-top: 8rem;
        }
        .pt-21 {
            padding-top: 8.4rem;
        }
        .pt-22 {
            padding-top: 8.8rem;
        }
        .pt-23 {
            padding-top: 9.2rem;
        }
        .pt-24 {
            padding-top: 9.6rem;
        }
        .pt-25 {
            padding-top: 10rem;
        }
        .pt-26 {
            padding-top: 10.4rem;
        }
        .pt-27 {
            padding-top: 10.8rem;
        }
        .pt-28 {
            padding-top: 11.2rem;
        }
        .pt-29 {
            padding-top: 11.6rem;
        }
        .pt-30 {
            padding-top: 12rem;
        }


        .pb-1 {
            padding-bottom: 0.4rem;
        }
        .pb-2 {
            padding-bottom: 0.8rem;
        }
        .pb-3 {
            padding-bottom: 1.2rem;
        }
        .pb-4 {
            padding-bottom: 1.6rem;
        }
        .pb-5 {
            padding-bottom: 2rem;
        }
        .pb-6 {
            padding-bottom: 2.4rem;
        }
        .pb-7 {
            padding-bottom: 2.8rem;
        }
        .pb-8 {
            padding-bottom: 3.2rem;
        }
        .pb-9 {
            padding-bottom: 3.6rem;
        }
        .pb-10 {
            padding-bottom: 4rem;
        }
        .pb-11 {
            padding-bottom: 4.4rem;
        }
        .pb-12 {
            padding-bottom: 4.8rem;
        }
        .pb-13 {
            padding-bottom: 5.2rem;
        }
        .pb-14 {
            padding-bottom: 5.6rem;
        }
        .pb-15 {
            padding-bottom: 6rem;
        }
        .pb-16 {
            padding-bottom: 6.4rem;
        }
        .pb-17 {
            padding-bottom: 6.8rem;
        }
        .pb-18 {
            padding-bottom: 7.2rem;
        }
        .pb-19 {
            padding-bottom: 7.6rem;
        }
        .pb-20 {
            padding-bottom: 8rem;
        }
        .pb-21 {
            padding-bottom: 8.4rem;
        }
        .pb-22 {
            padding-bottom: 8.8rem;
        }
        .pb-23 {
            padding-bottom: 9.2rem;
        }
        .pb-24 {
            padding-bottom: 9.6rem;
        }
        .pb-25 {
            padding-bottom: 10rem;
        }
        .pb-26 {
            padding-bottom: 10.4rem;
        }
        .pb-27 {
            padding-bottom: 10.8rem;
        }
        .pb-28 {
            padding-bottom: 11.2rem;
        }
        .pb-29 {
            padding-bottom: 11.6rem;
        }
        .pb-30 {
            padding-bottom: 12rem;
        }


        .pl-1 {
            padding-left: 0.4rem;
        }
        .pl-2 {
            padding-left: 0.8rem;
        }
        .pl-3 {
            padding-left: 1.2rem;
        }
        .pl-4 {
            padding-left: 1.6rem;
        }
        .pl-5 {
            padding-left: 2rem;
        }
        .pl-6 {
            padding-left: 2.4rem;
        }
        .pl-7 {
            padding-left: 2.8rem;
        }
        .pl-8 {
            padding-left: 3.2rem;
        }
        .pl-9 {
            padding-left: 3.6rem;
        }
        .pl-10 {
            padding-left: 4rem;
        }
        .pl-11 {
            padding-left: 4.4rem;
        }
        .pl-12 {
            padding-left: 4.8rem;
        }
        .pl-13 {
            padding-left: 5.2rem;
        }
        .pl-14 {
            padding-left: 5.6rem;
        }
        .pl-15 {
            padding-left: 6rem;
        }
        .pl-16 {
            padding-left: 6.4rem;
        }
        .pl-17 {
            padding-left: 6.8rem;
        }
        .pl-18 {
            padding-left: 7.2rem;
        }
        .pl-19 {
            padding-left: 7.6rem;
        }
        .pl-20 {
            padding-left: 8rem;
        }
        .pl-21 {
            padding-left: 8.4rem;
        }
        .pl-22 {
            padding-left: 8.8rem;
        }
        .pl-23 {
            padding-left: 9.2rem;
        }
        .pl-24 {
            padding-left: 9.6rem;
        }
        .pl-25 {
            padding-left: 10rem;
        }
        .pl-26 {
            padding-left: 10.4rem;
        }
        .pl-27 {
            padding-left: 10.8rem;
        }
        .pl-28 {
            padding-left: 11.2rem;
        }
        .pl-29 {
            padding-left: 11.6rem;
        }
        .pl-30 {
            padding-left: 12rem;
        }


        .pr-1 {
            padding-right: 0.4rem;
        }
        .pr-2 {
            padding-right: 0.8rem;
        }
        .pr-3 {
            padding-right: 1.2rem;
        }
        .pr-4 {
            padding-right: 1.6rem;
        }
        .pr-5 {
            padding-right: 2rem;
        }
        .pr-6 {
            padding-right: 2.4rem;
        }
        .pr-7 {
            padding-right: 2.8rem;
        }
        .pr-8 {
            padding-right: 3.2rem;
        }
        .pr-9 {
            padding-right: 3.6rem;
        }
        .pr-10 {
            padding-right: 4rem;
        }
        .pr-11 {
            padding-right: 4.4rem;
        }
        .pr-12 {
            padding-right: 4.8rem;
        }
        .pr-13 {
            padding-right: 5.2rem;
        }
        .pr-14 {
            padding-right: 5.6rem;
        }
        .pr-15 {
            padding-right: 6rem;
        }
        .pr-16 {
            padding-right: 6.4rem;
        }
        .pr-17 {
            padding-right: 6.8rem;
        }
        .pr-18 {
            padding-right: 7.2rem;
        }
        .pr-19 {
            padding-right: 7.6rem;
        }
        .pr-20 {
            padding-right: 8rem;
        }
        .pr-21 {
            padding-right: 8.4rem;
        }
        .pr-22 {
            padding-right: 8.8rem;
        }
        .pr-23 {
            padding-right: 9.2rem;
        }
        .pr-24 {
            padding-right: 9.6rem;
        }
        .pr-25 {
            padding-right: 10rem;
        }
        .pr-26 {
            padding-right: 10.4rem;
        }
        .pr-27 {
            padding-right: 10.8rem;
        }
        .pr-28 {
            padding-right: 11.2rem;
        }
        .pr-29 {
            padding-right: 11.6rem;
        }
        .pr-30 {
            padding-right: 12rem;
        }


        .py-1 {
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        .py-2 {
            padding-top: 0.8rem;
            padding-bottom: 0.8rem;
        }
        .py-3 {
            padding-top: 1.2rem;
            padding-bottom: 1.2rem;
        }
        .py-4 {
            padding-top: 1.6rem;
            padding-bottom: 1.6rem;
        }
        .py-5 {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        .py-6 {
            padding-top: 2.4rem;
            padding-bottom: 2.4rem;
        }
        .py-7 {
            padding-top: 2.8rem;
            padding-bottom: 2.8rem;
        }
        .py-8 {
            padding-top: 3.2rem;
            padding-bottom: 3.2rem;
        }
        .py-9 {
            padding-top: 3.6rem;
            padding-bottom: 3.6rem;
        }
        .py-10 {
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
        .py-11 {
            padding-top: 4.4rem;
            padding-bottom: 4.4rem;
        }
        .py-12 {
            padding-top: 4.8rem;
            padding-bottom: 4.8rem;
        }
        .py-13 {
            padding-top: 5.2rem;
            padding-bottom: 5.2rem;
        }
        .py-14 {
            padding-top: 5.6rem;
            padding-bottom: 5.6rem;
        }
        .py-15 {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
        .py-16 {
            padding-top: 6.4rem;
            padding-bottom: 6.4rem;
        }
        .py-17 {
            padding-top: 6.8rem;
            padding-bottom: 6.8rem;
        }
        .py-18 {
            padding-top: 7.2rem;
            padding-bottom: 7.2rem;
        }
        .py-19 {
            padding-top: 7.6rem;
            padding-bottom: 7.6rem;
        }
        .py-20 {
            padding-top: 8rem;
            padding-bottom: 8rem;
        }
        .py-21 {
            padding-top: 8.4rem;
            padding-bottom: 8.4rem;
        }
        .py-22 {
            padding-top: 8.8rem;
            padding-bottom: 8.8rem;
        }
        .py-23 {
            padding-top: 9.2rem;
            padding-bottom: 9.2rem;
        }
        .py-24 {
            padding-top: 9.6rem;
            padding-bottom: 9.6rem;
        }
        .py-25 {
            padding-top: 10rem;
            padding-bottom: 10rem;
        }
        .py-26 {
            padding-top: 10.4rem;
            padding-bottom: 10.4rem;
        }
        .py-27 {
            padding-top: 10.8rem;
            padding-bottom: 10.8rem;
        }
        .py-28 {
            padding-top: 11.2rem;
            padding-bottom: 11.2rem;
        }
        .py-29 {
            padding-top: 11.6rem;
            padding-bottom: 11.6rem;
        }
        .py-30 {
            padding-top: 12rem;
            padding-bottom: 12rem;
        }



        .px-1 {
            padding-left: 0.4rem;
            padding-right: 0.4rem;
        }
        .px-2 {
            padding-left: 0.8rem;
            padding-right: 0.8rem;
        }
        .px-3 {
            padding-left: 1.2rem;
            padding-right: 1.2rem;
        }
        .px-4 {
            padding-left: 1.6rem;
            padding-right: 1.6rem;
        }
        .px-5 {
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .px-6 {
            padding-left: 2.4rem;
            padding-right: 2.4rem;
        }
        .px-7 {
            padding-left: 2.8rem;
            padding-right: 2.8rem;
        }
        .px-8 {
            padding-left: 3.2rem;
            padding-right: 3.2rem;
        }
        .px-9 {
            padding-left: 3.6rem;
            padding-right: 3.6rem;
        }
        .px-10 {
            padding-left: 4rem;
            padding-right: 4rem;
        }
        .px-11 {
            padding-left: 4.4rem;
            padding-right: 4.4rem;
        }
        .px-12 {
            padding-left: 4.8rem;
            padding-right: 4.8rem;
        }
        .px-13 {
            padding-left: 5.2rem;
            padding-right: 5.2rem;
        }
        .px-14 {
            padding-left: 5.6rem;
            padding-right: 5.6rem;
        }
        .px-15 {
            padding-left: 6rem;
            padding-right: 6rem;
        }
        .px-16 {
            padding-left: 6.4rem;
            padding-right: 6.4rem;
        }
        .px-17 {
            padding-left: 6.8rem;
            padding-right: 6.8rem;
        }
        .px-18 {
            padding-left: 7.2rem;
            padding-right: 7.2rem;
        }
        .px-19 {
            padding-left: 7.6rem;
            padding-right: 7.6rem;
        }
        .px-20 {
            padding-left: 8rem;
            padding-right: 8rem;
        }
        .px-21 {
            padding-left: 8.4rem;
            padding-right: 8.4rem;
        }
        .px-22 {
            padding-left: 8.8rem;
            padding-right: 8.8rem;
        }
        .px-23 {
            padding-left: 9.2rem;
            padding-right: 9.2rem;
        }
        .px-24 {
            padding-left: 9.6rem;
            padding-right: 9.6rem;
        }
        .px-25 {
            padding-left: 10rem;
            padding-right: 10rem;
        }
        .px-26 {
            padding-left: 10.4rem;
            padding-right: 10.4rem;
        }
        .px-27 {
            padding-left: 10.8rem;
            padding-right: 10.8rem;
        }
        .px-28 {
            padding-left: 11.2rem;
            padding-right: 11.2rem;
        }
        .px-29 {
            padding-left: 11.6rem;
            padding-right: 11.6rem;
        }
        .px-30 {
            padding-left: 12rem;
            padding-right: 12rem;
        }







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


    .m-m-1 {
        margin: 1rem;
    }
    .m-m-2 {
        margin: 2rem;
    }
    .m-m-3 {
        margin: 3rem;
    }
    .m-m-4 {
        margin: 4rem;
    }
    .m-m-5 {
        margin: 5rem;
    }
    .m-m-6 {
        margin: 6rem;
    }
    .m-m-7 {
        margin: 7rem;
    }
    .m-m-8 {
        margin: 8rem;
    }
    .m-m-9 {
        margin: 9rem;
    }
    .m-m-10 {
        margin: 10rem;
    }
    .m-m-11 {
        margin: 11rem;
    }
    .m-m-12 {
        margin: 12rem;
    }
    .m-m-13 {
        margin: 13rem;
    }
    .m-m-14 {
        margin: 14rem;
    }
    .m-m-15 {
        margin: 15rem;
    }
    .m-m-16 {
        margin: 16rem;
    }
    .m-m-17 {
        margin: 17rem;
    }
    .m-m-18 {
        margin: 18rem;
    }
    .m-m-19 {
        margin: 19rem;
    }
    .m-m-20 {
        margin: 20rem;
    }
    .m-m-21 {
        margin: 21rem;
    }
    .m-m-22 {
        margin: 22rem;
    }
    .m-m-23 {
        margin: 23rem;
    }
    .m-m-24 {
        margin: 24rem;
    }
    .m-m-25 {
        margin: 25rem;
    }
    .m-m-26 {
        margin: 26rem;
    }
    .m-m-27 {
        margin: 27rem;
    }
    .m-m-28 {
        margin: 28rem;
    }
    .m-m-29 {
        margin: 29rem;
    }
    .m-m-30 {
        margin: 30rem;
    }


    .mt-m-1 {
        margin-top: 1rem;
    }
    .mt-m-2 {
        margin-top: 2rem;
    }
    .mt-m-3 {
        margin-top: 3rem;
    }
    .mt-m-4 {
        margin-top: 4rem;
    }
    .mt-m-5 {
        margin-top: 5rem;
    }
    .mt-m-6 {
        margin-top: 6rem;
    }
    .mt-m-7 {
        margin-top: 7rem;
    }
    .mt-m-8 {
        margin-top: 8rem;
    }
    .mt-m-9 {
        margin-top: 9rem;
    }
    .mt-m-10 {
        margin-top: 10rem;
    }
    .mt-m-11 {
        margin-top: 11rem;
    }
    .mt-m-12 {
        margin-top: 12rem;
    }
    .mt-m-13 {
        margin-top: 13rem;
    }
    .mt-m-14 {
        margin-top: 14rem;
    }
    .mt-m-15 {
        margin-top: 15rem;
    }
    .mt-m-16 {
        margin-top: 16rem;
    }
    .mt-m-17 {
        margin-top: 17rem;
    }
    .mt-m-18 {
        margin-top: 18rem;
    }
    .mt-m-19 {
        margin-top: 19rem;
    }
    .mt-m-20 {
        margin-top: 20rem;
    }
    .mt-m-21 {
        margin-top: 21rem;
    }
    .mt-m-22 {
        margin-top: 22rem;
    }
    .mt-m-23 {
        margin-top: 23rem;
    }
    .mt-m-24 {
        margin-top: 24rem;
    }
    .mt-m-25 {
        margin-top: 25rem;
    }
    .mt-m-26 {
        margin-top: 26rem;
    }
    .mt-m-27 {
        margin-top: 27rem;
    }
    .mt-m-28 {
        margin-top: 28rem;
    }
    .mt-m-29 {
        margin-top: 29rem;
    }
    .mt-m-30 {
        margin-top: 30rem;
    }

    .mb-m-1 {
        margin-bottom: 1rem;
    }
    .mb-m-2 {
        margin-bottom: 2rem;
    }
    .mb-m-3 {
        margin-bottom: 3rem;
    }
    .mb-m-4 {
        margin-bottom: 4rem;
    }
    .mb-m-5 {
        margin-bottom: 5rem;
    }
    .mb-m-6 {
        margin-bottom: 6rem;
    }
    .mb-m-7 {
        margin-bottom: 7rem;
    }
    .mb-m-8 {
        margin-bottom: 8rem;
    }
    .mb-m-9 {
        margin-bottom: 9rem;
    }
    .mb-m-10 {
        margin-bottom: 10rem;
    }
    .mb-m-11 {
        margin-bottom: 11rem;
    }
    .mb-m-12 {
        margin-bottom: 12rem;
    }
    .mb-m-13 {
        margin-bottom: 13rem;
    }
    .mb-m-14 {
        margin-bottom: 14rem;
    }
    .mb-m-15 {
        margin-bottom: 15rem;
    }
    .mb-m-16 {
        margin-bottom: 16rem;
    }
    .mb-m-17 {
        margin-bottom: 17rem;
    }
    .mb-m-18 {
        margin-bottom: 18rem;
    }
    .mb-m-19 {
        margin-bottom: 19rem;
    }
    .mb-m-20 {
        margin-bottom: 20rem;
    }
    .mb-m-21 {
        margin-bottom: 21rem;
    }
    .mb-m-22 {
        margin-bottom: 22rem;
    }
    .mb-m-23 {
        margin-bottom: 23rem;
    }
    .mb-m-24 {
        margin-bottom: 24rem;
    }
    .mb-m-25 {
        margin-bottom: 25rem;
    }
    .mb-m-26 {
        margin-bottom: 26rem;
    }
    .mb-m-27 {
        margin-bottom: 27rem;
    }
    .mb-m-28 {
        margin-bottom: 28rem;
    }
    .mb-m-29 {
        margin-bottom: 29rem;
    }
    .mb-m-30 {
        margin-bottom: 30rem;
    }

    .ml-m-1 {
        margin-left: 1rem;
    }
    .ml-m-2 {
        margin-left: 2rem;
    }
    .ml-m-3 {
        margin-left: 3rem;
    }
    .ml-m-4 {
        margin-left: 4rem;
    }
    .ml-m-5 {
        margin-left: 5rem;
    }
    .ml-m-6 {
        margin-left: 6rem;
    }
    .ml-m-7 {
        margin-left: 7rem;
    }
    .ml-m-8 {
        margin-left: 8rem;
    }
    .ml-m-9 {
        margin-left: 9rem;
    }
    .ml-m-10 {
        margin-left: 10rem;
    }
    .ml-m-11 {
        margin-left: 11rem;
    }
    .ml-m-12 {
        margin-left: 12rem;
    }
    .ml-m-13 {
        margin-left: 13rem;
    }
    .ml-m-14 {
        margin-left: 14rem;
    }
    .ml-m-15 {
        margin-left: 15rem;
    }
    .ml-m-16 {
        margin-left: 16rem;
    }
    .ml-m-17 {
        margin-left: 17rem;
    }
    .ml-m-18 {
        margin-left: 18rem;
    }
    .ml-m-19 {
        margin-left: 19rem;
    }
    .ml-m-20 {
        margin-left: 20rem;
    }
    .ml-m-21 {
        margin-left: 21rem;
    }
    .ml-m-22 {
        margin-left: 22rem;
    }
    .ml-m-23 {
        margin-left: 23rem;
    }
    .ml-m-24 {
        margin-left: 24rem;
    }
    .ml-m-25 {
        margin-left: 25rem;
    }
    .ml-m-26 {
        margin-left: 26rem;
    }
    .ml-m-27 {
        margin-left: 27rem;
    }
    .ml-m-28 {
        margin-left: 28rem;
    }
    .ml-m-29 {
        margin-left: 29rem;
    }
    .ml-m-30 {
        margin-left: 30rem;
    }

    .mr-m-1 {
        margin-right: 1rem;
    }
    .mr-m-2 {
        margin-right: 2rem;
    }
    .mr-m-3 {
        margin-right: 3rem;
    }
    .mr-m-4 {
        margin-right: 4rem;
    }
    .mr-m-5 {
        margin-right: 5rem;
    }
    .mr-m-6 {
        margin-right: 6rem;
    }
    .mr-m-7 {
        margin-right: 7rem;
    }
    .mr-m-8 {
        margin-right: 8rem;
    }
    .mr-m-9 {
        margin-right: 9rem;
    }
    .mr-m-10 {
        margin-right: 10rem;
    }
    .mr-m-11 {
        margin-right: 11rem;
    }
    .mr-m-12 {
        margin-right: 12rem;
    }
    .mr-m-13 {
        margin-right: 13rem;
    }
    .mr-m-14 {
        margin-right: 14rem;
    }
    .mr-m-15 {
        margin-right: 15rem;
    }
    .mr-m-16 {
        margin-right: 16rem;
    }
    .mr-m-17 {
        margin-right: 17rem;
    }
    .mr-m-18 {
        margin-right: 18rem;
    }
    .mr-m-19 {
        margin-right: 19rem;
    }
    .mr-m-20 {
        margin-right: 20rem;
    }
    .mr-m-21 {
        margin-right: 21rem;
    }
    .mr-m-22 {
        margin-right: 22rem;
    }
    .mr-m-23 {
        margin-right: 23rem;
    }
    .mr-m-24 {
        margin-right: 24rem;
    }
    .mr-m-25 {
        margin-right: 25rem;
    }
    .mr-m-26 {
        margin-right: 26rem;
    }
    .mr-m-27 {
        margin-right: 27rem;
    }
    .mr-m-28 {
        margin-right: 28rem;
    }
    .mr-m-29 {
        margin-right: 29rem;
    }
    .mr-m-30 {
        margin-right: 30rem;
    }


    .my-m-1 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .my-m-2 {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .my-m-3 {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    .my-m-4 {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .my-m-5 {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
    .my-m-6 {
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    .my-m-7 {
        margin-top: 7rem;
        margin-bottom: 7rem;
    }
    .my-m-8 {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
    .my-m-9 {
        margin-top: 9rem;
        margin-bottom: 9rem;
    }
    .my-m-10 {
        margin-top: 10rem;
        margin-bottom: 10rem;
    }
    .my-m-11 {
        margin-top: 11rem;
        margin-bottom: 11rem;
    }
    .my-m-12 {
        margin-top: 12rem;
        margin-bottom: 12rem;
    }
    .my-m-13 {
        margin-top: 13rem;
        margin-bottom: 13rem;
    }
    .my-m-14 {
        margin-top: 14rem;
        margin-bottom: 14rem;
    }
    .my-m-15 {
        margin-top: 15rem;
        margin-bottom: 15rem;
    }
    .my-m-16 {
        margin-top: 16rem;
        margin-bottom: 16rem;
    }
    .my-m-17 {
        margin-top: 17rem;
        margin-bottom: 17rem;
    }
    .my-m-18 {
        margin-top: 18rem;
        margin-bottom: 18rem;
    }
    .my-m-19 {
        margin-top: 19rem;
        margin-bottom: 19rem;
    }
    .my-m-20 {
        margin-top: 20rem;
        margin-bottom: 20rem;
    }
    .my-m-21 {
        margin-top: 21rem;
        margin-bottom: 21rem;
    }
    .my-m-22 {
        margin-top: 22rem;
        margin-bottom: 22rem;
    }
    .my-m-23 {
        margin-top: 23rem;
        margin-bottom: 23rem;
    }
    .my-m-24 {
        margin-top: 24rem;
        margin-bottom: 24rem;
    }
    .my-m-25 {
        margin-top: 25rem;
        margin-bottom: 25rem;
    }
    .my-m-26 {
        margin-top: 26rem;
        margin-bottom: 26rem;
    }
    .my-m-27 {
        margin-top: 27rem;
        margin-bottom: 27rem;
    }
    .my-m-28 {
        margin-top: 28rem;
        margin-bottom: 28rem;
    }
    .my-m-29 {
        margin-top: 29rem;
        margin-bottom: 29rem;
    }
    .my-m-30 {
        margin-top: 30rem;
        margin-bottom: 30rem;
    }


    .mx-m-1 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .mx-m-2 {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .mx-m-3 {
        margin-left: 3rem;
        margin-right: 3rem;
    }
    .mx-m-4 {
        margin-left: 4rem;
        margin-right: 4rem;
    }
    .mx-m-5 {
        margin-left: 5rem;
        margin-right: 5rem;
    }
    .mx-m-6 {
        margin-left: 6rem;
        margin-right: 6rem;
    }
    .mx-m-7 {
        margin-left: 7rem;
        margin-right: 7rem;
    }
    .mx-m-8 {
        margin-left: 8rem;
        margin-right: 8rem;
    }
    .mx-m-9 {
        margin-left: 9rem;
        margin-right: 9rem;
    }
    .mx-m-10 {
        margin-left: 10rem;
        margin-right: 10rem;
    }
    .mx-m-11 {
        margin-left: 11rem;
        margin-right: 11rem;
    }
    .mx-m-12 {
        margin-left: 12rem;
        margin-right: 12rem;
    }
    .mx-m-13 {
        margin-left: 13rem;
        margin-right: 13rem;
    }
    .mx-m-14 {
        margin-left: 14rem;
        margin-right: 14rem;
    }
    .mx-m-15 {
        margin-left: 15rem;
        margin-right: 15rem;
    }
    .mx-m-16 {
        margin-left: 16rem;
        margin-right: 16rem;
    }
    .mx-m-17 {
        margin-left: 17rem;
        margin-right: 17rem;
    }
    .mx-m-18 {
        margin-left: 18rem;
        margin-right: 18rem;
    }
    .mx-m-19 {
        margin-left: 19rem;
        margin-right: 19rem;
    }
    .mx-m-20 {
        margin-left: 20rem;
        margin-right: 20rem;
    }
    .mx-m-21 {
        margin-left: 21rem;
        margin-right: 21rem;
    }
    .mx-m-22 {
        margin-left: 22rem;
        margin-right: 22rem;
    }
    .mx-m-23 {
        margin-left: 23rem;
        margin-right: 23rem;
    }
    .mx-m-24 {
        margin-left: 24rem;
        margin-right: 24rem;
    }
    .mx-m-25 {
        margin-left: 25rem;
        margin-right: 25rem;
    }
    .mx-m-26 {
        margin-left: 26rem;
        margin-right: 26rem;
    }
    .mx-m-27 {
        margin-left: 27rem;
        margin-right: 27rem;
    }
    .mx-m-28 {
        margin-left: 28rem;
        margin-right: 28rem;
    }
    .mx-m-29 {
        margin-left: 29rem;
        margin-right: 29rem;
    }
    .mx-m-30 {
        margin-left: 30rem;
        margin-right: 30rem;
    }






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


    .p-m-0 {
        padding: 0;
    }
    .p-m-1 {
        padding: 1rem;
    }
    .p-m-2 {
        padding: 2rem;
    }
    .p-m-3 {
        padding: 3rem;
    }
    .p-m-4 {
        padding: 4rem;
    }
    .p-m-5 {
        padding: 5rem;
    }
    .p-m-6 {
        padding: 6rem;
    }
    .p-m-7 {
        padding: 7rem;
    }
    .p-m-8 {
        padding: 8rem;
    }
    .p-m-9 {
        padding: 9rem;
    }
    .p-m-10 {
        padding: 10rem;
    }
    .p-m-11 {
        padding: 11rem;
    }
    .p-m-12 {
        padding: 12rem;
    }
    .p-m-13 {
        padding: 13rem;
    }
    .p-m-14 {
        padding: 14rem;
    }
    .p-m-15 {
        padding: 15rem;
    }
    .p-m-16 {
        padding: 16rem;
    }
    .p-m-17 {
        padding: 17rem;
    }
    .p-m-18 {
        padding: 18rem;
    }
    .p-m-19 {
        padding: 19rem;
    }
    .p-m-20 {
        padding: 20rem;
    }
    .p-m-21 {
        padding: 21rem;
    }
    .p-m-22 {
        padding: 22rem;
    }
    .p-m-23 {
        padding: 23rem;
    }
    .p-m-24 {
        padding: 24rem;
    }
    .p-m-25 {
        padding: 25rem;
    }
    .p-m-26 {
        padding: 26rem;
    }
    .p-m-27 {
        padding: 27rem;
    }
    .p-m-28 {
        padding: 28rem;
    }
    .p-m-29 {
        padding: 29rem;
    }
    .p-m-30 {
        padding: 30rem;
    }


    .pt-m-0 {
        padding-top: 0;
    }
    .pt-m-1 {
        padding-top: 1rem;
    }
    .pt-m-2 {
        padding-top: 2rem;
    }
    .pt-m-3 {
        padding-top: 3rem;
    }
    .pt-m-4 {
        padding-top: 4rem;
    }
    .pt-m-5 {
        padding-top: 5rem;
    }
    .pt-m-6 {
        padding-top: 6rem;
    }
    .pt-m-7 {
        padding-top: 7rem;
    }
    .pt-m-8 {
        padding-top: 8rem;
    }
    .pt-m-9 {
        padding-top: 9rem;
    }
    .pt-m-10 {
        padding-top: 10rem;
    }
    .pt-m-11 {
        padding-top: 11rem;
    }
    .pt-m-12 {
        padding-top: 12rem;
    }
    .pt-m-13 {
        padding-top: 13rem;
    }
    .pt-m-14 {
        padding-top: 14rem;
    }
    .pt-m-15 {
        padding-top: 15rem;
    }
    .pt-m-16 {
        padding-top: 16rem;
    }
    .pt-m-17 {
        padding-top: 17rem;
    }
    .pt-m-18 {
        padding-top: 18rem;
    }
    .pt-m-19 {
        padding-top: 19rem;
    }
    .pt-m-20 {
        padding-top: 20rem;
    }
    .pt-m-21 {
        padding-top: 21rem;
    }
    .pt-m-22 {
        padding-top: 22rem;
    }
    .pt-m-23 {
        padding-top: 23rem;
    }
    .pt-m-24 {
        padding-top: 24rem;
    }
    .pt-m-25 {
        padding-top: 25rem;
    }
    .pt-m-26 {
        padding-top: 26rem;
    }
    .pt-m-27 {
        padding-top: 27rem;
    }
    .pt-m-28 {
        padding-top: 28rem;
    }
    .pt-m-29 {
        padding-top: 29rem;
    }
    .pt-m-30 {
        padding-top: 30rem;
    }


    .pb-m-0 {
        padding-bottom: 0;
    }
    .pb-m-1 {
        padding-bottom: 1rem;
    }
    .pb-m-2 {
        padding-bottom: 2rem;
    }
    .pb-m-3 {
        padding-bottom: 3rem;
    }
    .pb-m-4 {
        padding-bottom: 4rem;
    }
    .pb-m-5 {
        padding-bottom: 5rem;
    }
    .pb-m-6 {
        padding-bottom: 6rem;
    }
    .pb-m-7 {
        padding-bottom: 7rem;
    }
    .pb-m-8 {
        padding-bottom: 8rem;
    }
    .pb-m-9 {
        padding-bottom: 9rem;
    }
    .pb-m-10 {
        padding-bottom: 10rem;
    }
    .pb-m-11 {
        padding-bottom: 11rem;
    }
    .pb-m-12 {
        padding-bottom: 12rem;
    }
    .pb-m-13 {
        padding-bottom: 13rem;
    }
    .pb-m-14 {
        padding-bottom: 14rem;
    }
    .pb-m-15 {
        padding-bottom: 15rem;
    }
    .pb-m-16 {
        padding-bottom: 16rem;
    }
    .pb-m-17 {
        padding-bottom: 17rem;
    }
    .pb-m-18 {
        padding-bottom: 18rem;
    }
    .pb-m-19 {
        padding-bottom: 19rem;
    }
    .pb-m-20 {
        padding-bottom: 20rem;
    }
    .pb-m-21 {
        padding-bottom: 21rem;
    }
    .pb-m-22 {
        padding-bottom: 22rem;
    }
    .pb-m-23 {
        padding-bottom: 23rem;
    }
    .pb-m-24 {
        padding-bottom: 24rem;
    }
    .pb-m-25 {
        padding-bottom: 25rem;
    }
    .pb-m-26 {
        padding-bottom: 26rem;
    }
    .pb-m-27 {
        padding-bottom: 27rem;
    }
    .pb-m-28 {
        padding-bottom: 28rem;
    }
    .pb-m-29 {
        padding-bottom: 29rem;
    }
    .pb-m-30 {
        padding-bottom: 30rem;
    }


    .pl-m-0 {
        padding-left: 0;
    }
    .pl-m-1 {
        padding-left: 1rem;
    }
    .pl-m-2 {
        padding-left: 2rem;
    }
    .pl-m-3 {
        padding-left: 3rem;
    }
    .pl-m-4 {
        padding-left: 4rem;
    }
    .pl-m-5 {
        padding-left: 5rem;
    }
    .pl-m-6 {
        padding-left: 6rem;
    }
    .pl-m-7 {
        padding-left: 7rem;
    }
    .pl-m-8 {
        padding-left: 8rem;
    }
    .pl-m-9 {
        padding-left: 9rem;
    }
    .pl-m-10 {
        padding-left: 10rem;
    }
    .pl-m-11 {
        padding-left: 11rem;
    }
    .pl-m-12 {
        padding-left: 12rem;
    }
    .pl-m-13 {
        padding-left: 13rem;
    }
    .pl-m-14 {
        padding-left: 14rem;
    }
    .pl-m-15 {
        padding-left: 15rem;
    }
    .pl-m-16 {
        padding-left: 16rem;
    }
    .pl-m-17 {
        padding-left: 17rem;
    }
    .pl-m-18 {
        padding-left: 18rem;
    }
    .pl-m-19 {
        padding-left: 19rem;
    }
    .pl-m-20 {
        padding-left: 20rem;
    }
    .pl-m-21 {
        padding-left: 21rem;
    }
    .pl-m-22 {
        padding-left: 22rem;
    }
    .pl-m-23 {
        padding-left: 23rem;
    }
    .pl-m-24 {
        padding-left: 24rem;
    }
    .pl-m-25 {
        padding-left: 25rem;
    }
    .pl-m-26 {
        padding-left: 26rem;
    }
    .pl-m-27 {
        padding-left: 27rem;
    }
    .pl-m-28 {
        padding-left: 28rem;
    }
    .pl-m-29 {
        padding-left: 29rem;
    }
    .pl-m-30 {
        padding-left: 30rem;
    }


    .pr-m-0 {
        padding-right: 0;
    }
    .pr-m-1 {
        padding-right: 1rem;
    }
    .pr-m-2 {
        padding-right: 2rem;
    }
    .pr-m-3 {
        padding-right: 3rem;
    }
    .pr-m-4 {
        padding-right: 4rem;
    }
    .pr-m-5 {
        padding-right: 5rem;
    }
    .pr-m-6 {
        padding-right: 6rem;
    }
    .pr-m-7 {
        padding-right: 7rem;
    }
    .pr-m-8 {
        padding-right: 8rem;
    }
    .pr-m-9 {
        padding-right: 9rem;
    }
    .pr-m-10 {
        padding-right: 10rem;
    }
    .pr-m-11 {
        padding-right: 11rem;
    }
    .pr-m-12 {
        padding-right: 12rem;
    }
    .pr-m-13 {
        padding-right: 13rem;
    }
    .pr-m-14 {
        padding-right: 14rem;
    }
    .pr-m-15 {
        padding-right: 15rem;
    }
    .pr-m-16 {
        padding-right: 16rem;
    }
    .pr-m-17 {
        padding-right: 17rem;
    }
    .pr-m-18 {
        padding-right: 18rem;
    }
    .pr-m-19 {
        padding-right: 19rem;
    }
    .pr-m-20 {
        padding-right: 20rem;
    }
    .pr-m-21 {
        padding-right: 21rem;
    }
    .pr-m-22 {
        padding-right: 22rem;
    }
    .pr-m-23 {
        padding-right: 23rem;
    }
    .pr-m-24 {
        padding-right: 24rem;
    }
    .pr-m-25 {
        padding-right: 25rem;
    }
    .pr-m-26 {
        padding-right: 26rem;
    }
    .pr-m-27 {
        padding-right: 27rem;
    }
    .pr-m-28 {
        padding-right: 28rem;
    }
    .pr-m-29 {
        padding-right: 29rem;
    }
    .pr-m-30 {
        padding-right: 30rem;
    }



    .py-m-1 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .py-m-2 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .py-m-3 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .py-m-4 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .py-m-5 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .py-m-6 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .py-m-7 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .py-m-8 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .py-m-9 {
        padding-top: 9rem;
        padding-bottom: 9rem;
    }
    .py-m-10 {
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    .py-m-11 {
        padding-top: 11rem;
        padding-bottom: 11rem;
    }
    .py-m-12 {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    .py-m-13 {
        padding-top: 13rem;
        padding-bottom: 13rem;
    }
    .py-m-14 {
        padding-top: 14rem;
        padding-bottom: 14rem;
    }
    .py-m-15 {
        padding-top: 15rem;
        padding-bottom: 15rem;
    }
    .py-m-16 {
        padding-top: 16rem;
        padding-bottom: 16rem;
    }
    .py-m-17 {
        padding-top: 17rem;
        padding-bottom: 17rem;
    }
    .py-m-18 {
        padding-top: 18rem;
        padding-bottom: 18rem;
    }
    .py-m-19 {
        padding-top: 19rem;
        padding-bottom: 19rem;
    }
    .py-m-20 {
        padding-top: 20rem;
        padding-bottom: 20rem;
    }
    .py-m-21 {
        padding-top: 21rem;
        padding-bottom: 21rem;
    }
    .py-m-22 {
        padding-top: 22rem;
        padding-bottom: 22rem;
    }
    .py-m-23 {
        padding-top: 23rem;
        padding-bottom: 23rem;
    }
    .py-m-24 {
        padding-top: 24rem;
        padding-bottom: 24rem;
    }
    .py-m-25 {
        padding-top: 25rem;
        padding-bottom: 25rem;
    }
    .py-m-26 {
        padding-top: 26rem;
        padding-bottom: 26rem;
    }
    .py-m-27 {
        padding-top: 27rem;
        padding-bottom: 27rem;
    }
    .py-m-28 {
        padding-top: 28rem;
        padding-bottom: 28rem;
    }
    .py-m-29 {
        padding-top: 29rem;
        padding-bottom: 29rem;
    }
    .py-m-30 {
        padding-top: 30rem;
        padding-bottom: 30rem;
    }


    .px-m-1 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .px-m-2 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .px-m-3 {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .px-m-4 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .px-m-5 {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    .px-m-6 {
        padding-left: 6rem;
        padding-right: 6rem;
    }
    .px-m-7 {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    .px-m-8 {
        padding-left: 8rem;
        padding-right: 8rem;
    }
    .px-m-9 {
        padding-left: 9rem;
        padding-right: 9rem;
    }
    .px-m-10 {
        padding-left: 10rem;
        padding-right: 10rem;
    }
    .px-m-11 {
        padding-left: 11rem;
        padding-right: 11rem;
    }
    .px-m-12 {
        padding-left: 12rem;
        padding-right: 12rem;
    }
    .px-m-13 {
        padding-left: 13rem;
        padding-right: 13rem;
    }
    .px-m-14 {
        padding-left: 14rem;
        padding-right: 14rem;
    }
    .px-m-15 {
        padding-left: 15rem;
        padding-right: 15rem;
    }
    .px-m-16 {
        padding-left: 16rem;
        padding-right: 16rem;
    }
    .px-m-17 {
        padding-left: 17rem;
        padding-right: 17rem;
    }
    .px-m-18 {
        padding-left: 18rem;
        padding-right: 18rem;
    }
    .px-m-19 {
        padding-left: 19rem;
        padding-right: 19rem;
    }
    .px-m-20 {
        padding-left: 20rem;
        padding-right: 20rem;
    }
    .px-m-21 {
        padding-left: 21rem;
        padding-right: 21rem;
    }
    .px-m-22 {
        padding-left: 22rem;
        padding-right: 22rem;
    }
    .px-m-23 {
        padding-left: 23rem;
        padding-right: 23rem;
    }
    .px-m-24 {
        padding-left: 24rem;
        padding-right: 24rem;
    }
    .px-m-25 {
        padding-left: 25rem;
        padding-right: 25rem;
    }
    .px-m-26 {
        padding-left: 26rem;
        padding-right: 26rem;
    }
    .px-m-27 {
        padding-left: 27rem;
        padding-right: 27rem;
    }
    .px-m-28 {
        padding-left: 28rem;
        padding-right: 28rem;
    }
    .px-m-29 {
        padding-left: 29rem;
        padding-right: 29rem;
    }
    .px-m-30 {
        padding-left: 30rem;
        padding-right: 30rem;
    }




}








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



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

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

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

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

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

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

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

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

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

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

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

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




/* MOBILE */


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

    .center-m {
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        display: grid;
    }
    
    .center-left-m {
        justify-content: start;
        align-content: center;
        justify-items: start;
        align-items: center;
        display: grid;
    }
    
    .center-right-m {
        justify-content: end;
        align-content: center;
        justify-items: end;
        align-items: center;
        display: grid;
    }
    
    .top-left-m {
        justify-content: start;
        align-content: start;
        justify-items: start;
        align-items: start;
        display: grid;
    }
    
    .top-center-m {
        justify-content: center;
        align-content: start;
        justify-items: center;
        align-items: start;
        display: grid;
    }
    
    .top-right-m {
        justify-content: end;
        align-content: start;
        justify-items: end;
        align-items: start;
        display: grid;
    }
    
    .bottom-left-m {
        justify-content: start;
        align-content: end;
        justify-items: start;
        align-items: end;
        display: grid;
    }
    
    .bottom-center-m {
        justify-content: center;
        align-content: end;
        justify-items: center;
        align-items: end;
        display: grid;
    }
    
    .bottom-right-m {
        justify-content: end;
        align-content: end;
        justify-items: end;
        align-items: end;
        display: grid;
    }
    
    .filled-left-m {
        justify-content: start;
        align-content: stretch;
        justify-items: start;
        align-items: stretch;
        display: grid;
    }
    
    .filled-right-m {
        justify-content: end;
        align-content: stretch;
        justify-items: end;
        align-items: stretch;
        display: grid;
    }
    
    .filled-center-m {
        justify-content: center;
        align-content: stretch;
        justify-items: center;
        align-items: stretch;
        display: grid;
    }
}