HTML link with media attribute works on service but not on localhost

I'm trying to use the html header link with a media attribute. Weirdly enough, I'm having an issue where it works on production but not localhost. Since it's just a static page I'm using VSCode Live Server extension to run it locally. I can see that desktop.css is present in the network tab and in the sources when I use Chrome dev tools. Images, fonts and the base styles.css file all work great, no problems there.

Obviously, I could work around this by using a css media query instead but I'd really like to know what's going on here for my own edification.

Weirdly enough, it does work when I use the "Toggle device toolbar" thing and view it at desktop width.

Relavent Code

From index.html

<head>
...
    <link href="./css/styles.css" rel="stylesheet" type="text/css" />
    <link href="./css/desktop.css" media="(min-width: 992px)" rel="stylesheet" type="text/css" />
...
</head>

Project Structure

project_root
├── README.md
├── css
│   ├── desktop.css
│   └── styles.css
├── fonts
│   └── ...
├── images
│   └── ...
└── index.html