How to make hero_image responsive?

I tried to use the recommended code from "Sizes with media queries", but it won't work.

I have this:

hero_image: main-cover-redgirl-q10.jpg

I added like this, but it doesn't work:

hero_image: ![Cyberpunk Girl](main-cover-redgirl-q10.jpg?sizes=%28max-width%3A26em%29+100vw%2C+50vw)

I assume that you're writing this in the configuration yaml of some theme (probably Quark?). Or maybe in the frontmatter of some page. Anyways, the syntax starting with "![Cyberpunk Girl](..." is for links is the Markdown syntax for images that you normally write in the content section of a page.

What happens with hero_image: ... depends on the theme. I don't know Quark much, or whatever theme you are using, but I would guess that the only valid value is an image file name or at most an URL. And I would guess that whether to "make it responsive" (i. e. generate different image sizes for different resolutions) is entirely up to the theme.