Site works in Designer, but not in browser. (Z index issue?)

Hey, I’m struggling to get scroll snapping working with a specific layout. It works and looks fine in the designer, but when published or locally it doesn’t work correctly.

(what you should see is 3 sections that scroll snap and the buttons and heading change accordingly)

I believe the issue is related to the fixed position content divs in each section and possibly a z-index issue but I’ve tried so many things but cannot fix it.

If I remove the fixed content divs, the scroll snapping works. But The fixed divs are essential to replace the content from the next section.

In the example above I’m using an interaction to show/hide the fixed divs but I’ve also tried opacity. Similar issues and also this causes the buttons not to work.

Here is my site Read-Only: []
(how to share your site Read-Only link)