Can't control CMS item element height in a grid!

I’ve successfully used Grids and can make them responsive simply by deleting a column so that item will then appear in a successive row. However when I attempt the same approach when the content is a CMS collection, the responsive set-ups seem to break. Specifically, the columns increase in height, and the new row appears further down the page in another section.

So while the desktop view looks fine (see share link below), the responsive views are a hot mess. I tried changing the Grid to a Flex Box but continued to have sizing and proportion issues. Grateful to anyone who can help!


Here is my public share link: [LINK](https://preview.webflow.com/preview/lead-guitar?utm_medium=preview_link&utm_source=designer&utm_content=lead-guitar&preview=73f40b04d5ceae76983eb1d56648a638&pageId=62cca236c675279c14b1f310&workflow=preview)
(how to access public share link)