In the following CSS, I can change the setting for:

    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); 

by manually altering 25rem to 33rem or 40rem (or some other #rem)

I want to change the value using the CSS var setting, but am having a brain fark.

I have tried:

    .mainGrid {
      display: grid;
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));   /* original version OK */
    /* none of the following work 
        grid-template-columns: repeat(auto-fit, minmax(var(--chars), 1fr));        --chars: '25rem';
        grid-template-columns: repeat(auto-fit, minmax(var(--chars)+'rem', 1fr));  --chars: 25;
    */
    }
    .mainGrid > section { border: 1px solid black; }

I can change the --chars value with JS, but neither changing 25 to 33 or '33rem' works

Is this just one area that the CSS var cannot be used because it is a count and not a string?