How to create responsive row background shapes

I’m using the background row shapes for some effect, I’m accessing these via the bottom shape option within the row styling.

I want my site to be responsive on all sizes, from 1440p to mobile, and I’ve noticed that I can’t seem to get it to look good across all devices.

Is there any way to adjust these settings using custom CSS or JS to achieve some responsiveness?