Css mask or multiple background images top middle bottom - responsive

Question

I have problem with creating background which is set up with 3 different images with RWD:

I have problem with creating background which is set up with 3 different images:

1. On the top is special graphic
2. In the middle is just gray color
3. On the bottom is special grahpic

I tried code like this:

`background: var(--color-gray);
mask: linear-gradient(var(--color-gray),var(--color-gray)), url(/images/bg-bottom.svg), url(/images/bg-wave-top.svg);
mask-repeat: no-repeat;
mask-position: 0 468px, top, bottom;
mask-size: 100% calc(100% - 703px), contain, contain;`

Result you can see on this website: in https://stowarzyszenielos.vot.pl/o-nas.html .about-us-middle section. On PC it works okey, but when I change window to smaller, everything is moving in wrong direction. I don't know how to calculate it to work with responsive