.m-10-pct{
      margin: 10%;
    }
  
      .m--10-pct{
        margin: -10%;
      }
    
    .m-1{
      margin: calc(var(--px-unit) * 1);
    }
  
    .m-1m{
      margin: calc(var(--px-min-unit) * 1);
    }
  
    .m-1x{
      margin: calc(var(--px-unit) * 1 * 10);
    }
  
    .m-1mx{
      margin: calc(var(--px-min-unit) * 1 * 10);
    }
  
    .m-1mxx{
      margin: calc(var(--px-min-unit) * 1 * 100);
    }
  
    .m--1{
      margin: calc(var(--px-unit) * 1 * -1);
    }
  
    .m--1m{
      margin: calc(var(--px-min-unit) * 1 * -1);
    }
  
    .m--1x{
      margin: calc(var(--px-unit) * 1 * 10 * -1);
    }
  
    .m--1mx{
      margin: calc(var(--px-min-unit) * 1 * 10 * -1);
    }
  
    .m--1mxx{
      margin: calc(var(--px-min-unit) * 1 * 100 * -1);
    }
  
    .m-20-pct{
      margin: 20%;
    }
  
      .m--20-pct{
        margin: -20%;
      }
    
    .m-2{
      margin: calc(var(--px-unit) * 2);
    }
  
    .m-2m{
      margin: calc(var(--px-min-unit) * 2);
    }
  
    .m-2x{
      margin: calc(var(--px-unit) * 2 * 10);
    }
  
    .m-2mx{
      margin: calc(var(--px-min-unit) * 2 * 10);
    }
  
    .m-2mxx{
      margin: calc(var(--px-min-unit) * 2 * 100);
    }
  
    .m--2{
      margin: calc(var(--px-unit) * 2 * -1);
    }
  
    .m--2m{
      margin: calc(var(--px-min-unit) * 2 * -1);
    }
  
    .m--2x{
      margin: calc(var(--px-unit) * 2 * 10 * -1);
    }
  
    .m--2mx{
      margin: calc(var(--px-min-unit) * 2 * 10 * -1);
    }
  
    .m--2mxx{
      margin: calc(var(--px-min-unit) * 2 * 100 * -1);
    }
  
    .m-30-pct{
      margin: 30%;
    }
  
      .m--30-pct{
        margin: -30%;
      }
    
    .m-3{
      margin: calc(var(--px-unit) * 3);
    }
  
    .m-3m{
      margin: calc(var(--px-min-unit) * 3);
    }
  
    .m-3x{
      margin: calc(var(--px-unit) * 3 * 10);
    }
  
    .m-3mx{
      margin: calc(var(--px-min-unit) * 3 * 10);
    }
  
    .m-3mxx{
      margin: calc(var(--px-min-unit) * 3 * 100);
    }
  
    .m--3{
      margin: calc(var(--px-unit) * 3 * -1);
    }
  
    .m--3m{
      margin: calc(var(--px-min-unit) * 3 * -1);
    }
  
    .m--3x{
      margin: calc(var(--px-unit) * 3 * 10 * -1);
    }
  
    .m--3mx{
      margin: calc(var(--px-min-unit) * 3 * 10 * -1);
    }
  
    .m--3mxx{
      margin: calc(var(--px-min-unit) * 3 * 100 * -1);
    }
  
    .m-40-pct{
      margin: 40%;
    }
  
      .m--40-pct{
        margin: -40%;
      }
    
    .m-4{
      margin: calc(var(--px-unit) * 4);
    }
  
    .m-4m{
      margin: calc(var(--px-min-unit) * 4);
    }
  
    .m-4x{
      margin: calc(var(--px-unit) * 4 * 10);
    }
  
    .m-4mx{
      margin: calc(var(--px-min-unit) * 4 * 10);
    }
  
    .m-4mxx{
      margin: calc(var(--px-min-unit) * 4 * 100);
    }
  
    .m--4{
      margin: calc(var(--px-unit) * 4 * -1);
    }
  
    .m--4m{
      margin: calc(var(--px-min-unit) * 4 * -1);
    }
  
    .m--4x{
      margin: calc(var(--px-unit) * 4 * 10 * -1);
    }
  
    .m--4mx{
      margin: calc(var(--px-min-unit) * 4 * 10 * -1);
    }
  
    .m--4mxx{
      margin: calc(var(--px-min-unit) * 4 * 100 * -1);
    }
  
    .m-50-pct{
      margin: 50%;
    }
  
      .m--50-pct{
        margin: -50%;
      }
    
    .m-5{
      margin: calc(var(--px-unit) * 5);
    }
  
    .m-5m{
      margin: calc(var(--px-min-unit) * 5);
    }
  
    .m-5x{
      margin: calc(var(--px-unit) * 5 * 10);
    }
  
    .m-5mx{
      margin: calc(var(--px-min-unit) * 5 * 10);
    }
  
    .m-5mxx{
      margin: calc(var(--px-min-unit) * 5 * 100);
    }
  
    .m--5{
      margin: calc(var(--px-unit) * 5 * -1);
    }
  
    .m--5m{
      margin: calc(var(--px-min-unit) * 5 * -1);
    }
  
    .m--5x{
      margin: calc(var(--px-unit) * 5 * 10 * -1);
    }
  
    .m--5mx{
      margin: calc(var(--px-min-unit) * 5 * 10 * -1);
    }
  
    .m--5mxx{
      margin: calc(var(--px-min-unit) * 5 * 100 * -1);
    }
  
    .m-60-pct{
      margin: 60%;
    }
  
      .m--60-pct{
        margin: -60%;
      }
    
    .m-6{
      margin: calc(var(--px-unit) * 6);
    }
  
    .m-6m{
      margin: calc(var(--px-min-unit) * 6);
    }
  
    .m-6x{
      margin: calc(var(--px-unit) * 6 * 10);
    }
  
    .m-6mx{
      margin: calc(var(--px-min-unit) * 6 * 10);
    }
  
    .m-6mxx{
      margin: calc(var(--px-min-unit) * 6 * 100);
    }
  
    .m--6{
      margin: calc(var(--px-unit) * 6 * -1);
    }
  
    .m--6m{
      margin: calc(var(--px-min-unit) * 6 * -1);
    }
  
    .m--6x{
      margin: calc(var(--px-unit) * 6 * 10 * -1);
    }
  
    .m--6mx{
      margin: calc(var(--px-min-unit) * 6 * 10 * -1);
    }
  
    .m--6mxx{
      margin: calc(var(--px-min-unit) * 6 * 100 * -1);
    }
  
    .m-70-pct{
      margin: 70%;
    }
  
      .m--70-pct{
        margin: -70%;
      }
    
    .m-7{
      margin: calc(var(--px-unit) * 7);
    }
  
    .m-7m{
      margin: calc(var(--px-min-unit) * 7);
    }
  
    .m-7x{
      margin: calc(var(--px-unit) * 7 * 10);
    }
  
    .m-7mx{
      margin: calc(var(--px-min-unit) * 7 * 10);
    }
  
    .m-7mxx{
      margin: calc(var(--px-min-unit) * 7 * 100);
    }
  
    .m--7{
      margin: calc(var(--px-unit) * 7 * -1);
    }
  
    .m--7m{
      margin: calc(var(--px-min-unit) * 7 * -1);
    }
  
    .m--7x{
      margin: calc(var(--px-unit) * 7 * 10 * -1);
    }
  
    .m--7mx{
      margin: calc(var(--px-min-unit) * 7 * 10 * -1);
    }
  
    .m--7mxx{
      margin: calc(var(--px-min-unit) * 7 * 100 * -1);
    }
  
    .m-80-pct{
      margin: 80%;
    }
  
      .m--80-pct{
        margin: -80%;
      }
    
    .m-8{
      margin: calc(var(--px-unit) * 8);
    }
  
    .m-8m{
      margin: calc(var(--px-min-unit) * 8);
    }
  
    .m-8x{
      margin: calc(var(--px-unit) * 8 * 10);
    }
  
    .m-8mx{
      margin: calc(var(--px-min-unit) * 8 * 10);
    }
  
    .m-8mxx{
      margin: calc(var(--px-min-unit) * 8 * 100);
    }
  
    .m--8{
      margin: calc(var(--px-unit) * 8 * -1);
    }
  
    .m--8m{
      margin: calc(var(--px-min-unit) * 8 * -1);
    }
  
    .m--8x{
      margin: calc(var(--px-unit) * 8 * 10 * -1);
    }
  
    .m--8mx{
      margin: calc(var(--px-min-unit) * 8 * 10 * -1);
    }
  
    .m--8mxx{
      margin: calc(var(--px-min-unit) * 8 * 100 * -1);
    }
  
    .m-90-pct{
      margin: 90%;
    }
  
      .m--90-pct{
        margin: -90%;
      }
    
    .m-9{
      margin: calc(var(--px-unit) * 9);
    }
  
    .m-9m{
      margin: calc(var(--px-min-unit) * 9);
    }
  
    .m-9x{
      margin: calc(var(--px-unit) * 9 * 10);
    }
  
    .m-9mx{
      margin: calc(var(--px-min-unit) * 9 * 10);
    }
  
    .m-9mxx{
      margin: calc(var(--px-min-unit) * 9 * 100);
    }
  
    .m--9{
      margin: calc(var(--px-unit) * 9 * -1);
    }
  
    .m--9m{
      margin: calc(var(--px-min-unit) * 9 * -1);
    }
  
    .m--9x{
      margin: calc(var(--px-unit) * 9 * 10 * -1);
    }
  
    .m--9mx{
      margin: calc(var(--px-min-unit) * 9 * 10 * -1);
    }
  
    .m--9mxx{
      margin: calc(var(--px-min-unit) * 9 * 100 * -1);
    }
  
    .m-100-pct{
      margin: 100%;
    }
  
      .m--100-pct{
        margin: -100%;
      }
    
    .m-10{
      margin: calc(var(--px-unit) * 10);
    }
  
    .m-10m{
      margin: calc(var(--px-min-unit) * 10);
    }
  
    .m-10x{
      margin: calc(var(--px-unit) * 10 * 10);
    }
  
    .m-10mx{
      margin: calc(var(--px-min-unit) * 10 * 10);
    }
  
    .m-10mxx{
      margin: calc(var(--px-min-unit) * 10 * 100);
    }
  
    .m--10{
      margin: calc(var(--px-unit) * 10 * -1);
    }
  
    .m--10m{
      margin: calc(var(--px-min-unit) * 10 * -1);
    }
  
    .m--10x{
      margin: calc(var(--px-unit) * 10 * 10 * -1);
    }
  
    .m--10mx{
      margin: calc(var(--px-min-unit) * 10 * 10 * -1);
    }
  
    .m--10mxx{
      margin: calc(var(--px-min-unit) * 10 * 100 * -1);
    }
  
     .m-0{
       margin: 0;
     }
   
     .m-auto{
       margin: auto;
     }