Can I use CSS variables with the 'picture->source->media' attribute?

See more:

CSS

HTML

In my HTML, I have...

<picture>
	<source media="(min-width: 1200px)" srcset="images/Size600.jpg">
	<source media="(min-width: 600px)" srcset="images/Size300.jpg">
	<img src="images/Size300.jpg">
</picture>

...which works exactly as expected.

The problem is that I have multiple images, even on different pages, that I wish to respond to the same screen-width media query. So, I thought I'd use CSS variables. I changed to this...

In a separate styles.css file:

:root
{
	--image-big: 1200px;
	--image-small: 600px;
}

In HTML file:

<picture>
	<source media="(min-width: val(--image-big))" srcset="images/Size600.jpg">
	<source media="(min-width: val(--image-small))" srcset="images/Size300.jpg">
	<img src="images/Size300.jpg">
</picture>

...but it doesn't seem to work. As far as I can tell, I always get the smaller image. I'm not sure if this is being triggered by the second source line or the fallback img line.

Should this work? If so, can anyone spot what I'm doing wrong (apart from programming as a living!)?

What I have tried:

I've tried using a more specific scope than :root (e.g. assigning a class to the picture element and targeting that).

I've also tried digging around in Edge's developer tools but can't see anything that helps me.