Responsive picture

I use gutenberg to mix text and photos in an article. I could not figure out how to make the photos responsive using just the provided blocks, so I give each photo a custom class like “mypic40”, then add addition css for that class
.mypic40 { width:40%; float:right; }

Oddly, for images that are set to right align in gutenherg, adding the width property cause it to move to the left, why? So I add the float property to fix this. Images that are left aligned don’t need the float property.

Since having responsive photos is a common need, there must be an easier way to do this without css?

The page I need help with: [log in to see the link]