Note from 2 November 2022

TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

Safari requires a media type, like all.

So here's the "right" syntax:
@​media not all and (min-width: 60rem) { … }

  1. Note from 24 May 2023

    Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?