How to best position asymmetrical divs etc on horizontally scrolling section

Hi all,

Hoping I can be put in the right direction with an aspect of my first Webflow build.

For reference please see my site in development. I have a section that scrolls horizontally and content is spaced out with small overlaps in an asymmetrical fashion.

Please set the canvas to around 2500px to understand how I wish the content to be placed.

https://preview.webflow.com/preview/stakra?utm_medium=preview_link&utm_source=designer&utm_content=stakra&preview=c68b594ba9fcd71695d7ad1017d7e245&workflow=preview

Make sure to set overflow to show on Body > track > camera to view horizontal content within the editor. If you using a mouse or some trackpads you may need to press and hold shift to scroll horizontally within the editor.

I’m currently making the divs, images and text etc stay put by using absolute positioning and due to my lack of knowledge I’m unsure if this is the best option. It seems I would need several desktop breakpoints to make this work currently.

Should I perhaps be ensuring that all text is responsive based on viewer height / width and do the same in terms of absolute positioning?

I’m just guessing that a grid may be helpful here but I’ve yet to use and fully understand them to the point I don’t know how responsive they are.

Any advice would be much appreciated.

As a side note I won’t be attempting to make the horizontal scroll mobile-friendly, I’ll resort to a vertical alternative.

Many thanks!