Quark: different hero-images for different screen-sizes

I installed a Quark One-Page Site Skeleton, Maybe this will be our new band website.
In order for the band to be fully represented on the Hero image on both large, horizontally oriented displays and small, vertically oriented displays, a separate image would have to be inserted for small screens.

I've tried in CSS with the @media tag, but have failed so far. I don't see which class the background-image belongs to.

Maybe someone can find a solution?

I have the exact same issue but I'm using modular pages. This post was a huge help!

These are the changes I made to have different hero images for a modular page

I had to edit the hero.html.twig in templates/modules and remove {% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}

Then the css class for modular is .modular-hero.hero {