Calculated css variables don't update in media queries

Question

I've been working with some code that uses css variables where one of the variables derives it's value from a calc formula containing another variable (like the code below)

:root {
 --parent-size: 20rem;
 --child-size: calc(var(--parent-size) / 2);
}

...

@media (min-width: 768px) {
 --parent-size: 30rem;
}

When var(--parent-size) change; var(--child-size) remains the same. I'm assuming this might be a bug as it only affect variables with calculated values.

I've added a jsfiddle for reference here