@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  .TM {
    animation: counter 5s forwards ease-in-out;
    counter-reset: num var(--num);
    font: 800 40px system-ui;
    padding: 0.2rem;
  }
  .TM::after {
    content: counter(num);
  }
 
  @keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 1000;
    }
  }

  @property --kum {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  .CL {
    animation: counter1 5s forwards ease-in-out;
    counter-reset: kum var(--kum);
    font: 800 40px system-ui;
    padding: 0.2rem;
  }
  .CL::after {
    content: counter(kum);
  }
 
  @keyframes counter1 {
    from {
      --kum: 0;
    }
    to {
      --kum: 200;
    }
  }
  
  @property --bum {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  .CL2 {
    animation: counter3 5s forwards ease-in-out;
    counter-reset: bum var(--bum);
    font: 800 40px system-ui;
    padding: 0.2rem;
  }
  .CL2::after {
    content: counter(bum);
  }
 
  @keyframes counter3 {
    from {
      --bum: 0;
    }
    to {
      --bum: 22;
    }
  }

  @property --aum {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
  
  .CL1 {
    animation: counter4 5s forwards ease-in-out;
    counter-reset: aum var(--aum);
    font: 800 40px system-ui;
    padding: 0.2rem;
  }
  .CL1::after {
    content: counter(aum);
  }
 
  @keyframes counter4 {
    from {
      --aum: 0;
    }
    to {
      --aum: 125;
    }
  }