how retrieve an already calculated CSS rule and not the calc syntax

Question

here is a very little question that I can't answer easily, and I think this is strange. I got a div with a CSS calc rule for Height

@media screen and ( max-device-width: 399px)
{
    :root{
    --imgItem-width: 30px;
    --imgItem-height: 55px;
    --imgNav-width: 80px;
    --imgNav-height: 35px;
    
}

.postPlace{
    height: calc(var(--imgItem-height) * 2 + 5px) ;
    --gsh : calc( var(--imgItem-height) /2 ) ;
}

This div is growing on user requests through a jscript. That's working. But it's an incremental version. I store in a cookie the number of time it should grow and do it automatically. Then when he comes back to grow again, and if the div has already been extended, I don't have the initial size of the div. And that's the point. In the script, I go with a standard value of 300px which is too much for a smartphone and may be not enough for a wild screen.

.animate({
      height:"+=300", 
      }, 1500 );

So I would like to get the real calc rule stored in a var, that I can read through js (or jq). I tried getcomputedstyle but I'm not getting a calculated var, I'm getting the def of the calc (in this case "--gsh : calc( var(--imgItem-height) /2 )" and not 27px) ;

Does anyone got a little idea about this thing?

I saw some scss things around, but for a so silly thing, I fill a little upset...