Layout issue with Firefox under Windows 11

Question

I have an issue with styling rules on different devices...

In my css rules I am using media queries to adjust the layout to different devices. Works fine so far on different devices I tested on. With one strange exception: Firefox on Windows 11.

Here are the media queries I am using, inside those queries I have a definition that defines float for two containers. There is more, obviously, this is stripped down:

@media only screen and (max-width: 768px) { ... }
@media only screen and (min-width: 768px) { 
  .wrapper {
    &.album-list {
      .sidebar {
        width: 30%;
        float: right;
      }
      .content {
        width: 70%;
        float: left;
      }
    }
    &.album {
      .sidebar {
        width: 60%;
        float: left;
      }
      .content {
        width: 40%;
        float: right;
      }
    }
  }
}

I am sure that this is a media query issue, since when I check in the development console of that browser, it does not show any of the style rules defined in those media query blocks. Firefox just ignores those. Maybe because it decides that they do not apply, though I fail to understand why that should be the case.

I cannot believe that Firefox under Windows 11 does not have valid support for such media queries ...

My question: what am I missing here? Why is the layout working on all devices, also on Chrome under Windows11, but not with Firefox and only under Windows11?

Update:

It seems that this is not a general issue. I tried other systems running Windows 11 and Firefox and those behaved fine, as expected. So it appears to be something special on that system where I observe the issue. Anyone got an idea for me what the issue might be with that system?