CSS scroll-snap on overlapping divs not working in Firefox

I was messing around with CSS and tried to make a scroll snap effect in some divs that overlap each other on scroll, like cards coming up and down over each other. When i scroll up they disapear leaving allways 1 div in the viewport.

I tried to add a snap effect when i scroll into an out of a div. The snap effect works fine on Edge and Chrome but when i try it on firefox, sometimes divs just don’t scroll totally or don’t let me use scroll on mouse wheel.

To keep the “overlapping divs” effect i used:

position: sticky

top: 0

Here is a codepen link: https://codepen.io/MoreiraJorge/pen/ZEdvzmG

PS: I didn’t test it in Safari.