Positioning Conundrum

Hello there everybody!

I’m trying to configure these spheres to be RESPONSIVELY positioned like this screenshot, so that all elements (spheres) change size but relatively maintain their position on the page.

the trouble that I’m finding is that when the viewport size is changed, the spheres shift in position. I thought it would be easy, as the first red sphere was placed right where i wanted and doesn’t shift much with the viewport, however i got lucky because it was positioned within 1% of 50% of the ball container.

I want each sphere to be it’s own element so that they can be animated individually, so grouping all of them into one element isn’t an option. Is what I’m trying to accomplish even possible?

Any feedback is welcome, thank you!

Here is my public share link: Webflow - Copy of WunderBloom

Here’s the approach you need;

You’re a life-saver, thank you so much!