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