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: 
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.