Why doesn't css repeat() use custom properties?

I have defined a css variable --num-bricks-per-row, however it does not seem to work in the css repeat function when setting grid columns.

:root {
    font-size: 10px;
    --num-of-bricks: 40;
    --num-of-rows: 4;
    --num-bricks-per-row: calc(var(--num-of-bricks) / var(--num-of-rows));
    --row-width: 70vw;
    --brick-width: calc((var(--row-width) / (var(--num-bricks-per-row)) * 0.8));
    --all-brick-width: calc((var(--brick-width) * var(--num-bricks-per-row)));
    --num-brick-margin: calc((var(--num-bricks-per-row) + 1) * 2);
    --brick-margin: calc((var(--row-width) - var(--all-brick-width)) / var(--num-brick-margin));
    --brick-height: 2rem;
}

.brickArea {
    display: grid;
    grid-template-columns: repeat(var(--num-bricks-per-row), 1fr);
    grid-template-rows: repeat(var(--num-of-rows), 1fr);
    width: var(--row-width);
    height: calc(var(--row-width) * (var(--num-bricks-per-row) * var(--brick-margin) * 2) * var(--num-of-rows));
    
    background-color: transparent;
}

the .brickArea element only shows 1 column with 40 rows. When I hardcode the number of columns it works.

The code below works however but I don't want to hardcode it.

.brickArea {
    grid-template-columns: repeat(10, 1fr);
}