Media Query: max-resolution doesn't work (but exercise says I did it right)

I’ve done the media query exercise, put in the right code (the box got checked and all) but media queries dealing with resolution don’t work on my computer.

I wasn’t sure, so I tried with something obvious: made the text go red. It works with a media query using the width, but as soon as I try to use resolution, it stops working. I even checked with a min-resolution of 10dpi (or 0, or max 1000), nothing!

This works:

@media only screen and (max-width: 480px) {
  .page-description {
    font-size: 20px;
    color: red;
  }
}

This doesn’t work:

@media only screen and (min-resolution: 10dpi) and (max-width: 480px) {
  .page-description {
    font-size: 20px;
    color: red;
  }
}

I had this problem in the previous exercice, where the logo image should have changed, but didn’t. I tried Google, but couldn’t find an answer.

I’m using Safari 13.1 on macOs 10.13.6