Animated overlay CMS Grid Not Displaying in Rows

I’ve created a CMS grid that auto adjusts columns and rows based on screen size. Now I’ve added an animated overlay, but once the grid adds a row, the CMS content it pulls for the top row collection items is the bottom row collection items content. Any ideas on how to ensure the animated content matches the CMS collection item over multiple rows?

Here is my public share link