CSS variables – :root not working in media query

Question

I can't figure out why this media query is not working. The media query is always referring to the first instance of the :root variables instead of the :root variables inside the media query.

// Outside media query
:root {
  --default: 10px;
}

DIV {
  width: var(--default);
}

//Inside media query
@media screen and (max-width: 55rem) {
  :root {
    --default: 500px;
  }
  
  DIV {
    width: var(--default);
  }
}

This always results in the h1 tag being 10px wide instead of 500px wide, even if the media query. (Testing in Chrome and iOS Safari.)

Any tips?

I'm following this guide: https://www.freecodecamp.org/news/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f/

---

DEMO

const log = () => console.log(getComputedStyle(document.documentElement).getPropertyValue('--default'));

log();
window.addEventListener('resize', log);

:root {
  --default: 10px;
}

h1 {
  width: var(--default);
}

@media screen and (max-width: 55rem) {
   :root {
    --default: 500px;
  }
  h1 {
    width: var(--default);
  }
}

<h1>HEADING</h1>