css-bug: max-width with alignwide-width not working in Firefox 68 ESR

I want to use the twentytwentyone as main theme to build a child theme. But we have customers, who use in their company older Firefox browsers, like the Firefox 68 ESR.

With this Firefox version, the default main theme twentytwentyone has problems.

You can check that directly on the twentytwentyone theme mainpage. “Normally” there is space between the content and the left / right side of the screen. On Firefox 68 ESR the content spreads over the whole screen width.

It seems, that the following line doesn’t work:

.widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width {
   max-width: var(--responsive--alignwide-width);
}

If i replace this, for example to:
max-width: calc(100% - 80px);

The bug is gone.

If i follow the css-variable --responsive--alignwide-width:

@media only screen and (min-width: 822px) {
	:root {
		[...]
		--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
	}
}

And for --global--spacing-horizontal:
--global--spacing-horizontal: 25px;

So, i am not that expert, to see, what the problem is. I see just the calc-function with multiplications and different units, like %, px or vw. Firefox should have full calc-support since version 59, see MDN Web Docs. So 68 ESR should be fine?

Do you support older browsers? What is the problem here? Will you fix and update the theme? Or don’t you support older versions and i have to fix that in my child-theme by myself? And if you don’t support, may you help me maybe with a good solution?

Thanks in advance for your help!

The page I need help with: [log in to see the link]