How to Stick a Scrolling Section to the bottom of the viewport

Hey All!
So I have a website with some cards that as the user scrolls down, they fly in from the bottom and stack on top of eachother. Basically each card is on it’s own Section and they have position sticky about 140px from the top.

Now this works great on desktop, but on mobile it doesn’t work. Because those sections end up being of various heights due to responsiveness. On desktop they cover up a fraction of the VH.

So what i want is for the user to be able to scroll through the section/card and for it to stick to the bottom of their screen as the next one starts scrolling in on top.

Since all the cards height change on the content, I want some way to say to each section " Stop scrolling and Ssick to the bottom of the screen". I thought position sticky at 0 on the bottom would work but it has not.

Any ideas?

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