Hello!
This could potentially be a very simple fix but after searching around I was unable to find anything. I have set my grid to auto-fit, however, I did that so on mobile and smaller screens it would become just one column. I am wondering if I missed something and there is a way for it to still be autofitting but with a max of two columns?
Thank you in advance 
I am curious, why you are using a grid?
I figured it is the best way to achieve what I want? My goal is 4 of those cards, to be in 2x2 formation on everything but the mobile displays where they would be one under the other. I need the card wrapper to stay in its fixed sized. I was under the impression that this would be the easiest way where it automatically fits to screen size and I don’t have to set custom sizes for every display type. I’m willing to try out other things but would love to see if this is possible first. If not do you have any suggestions how to go about doing the above?
Notice no containers.
I appreciate all your help! I, however, have not been able to succeed in achieving what I need to do. I copied virtually exactly what you did with no success. I’d like to add some details in case maybe this will help you out. When changing the min height for “card” (on my website) it simply shrunk it down to the heading. I believe this is due to “card” holding both the front and back of the card. They spin 180 on click. When I changed everything on my site they did not stack one on top of the other in mobile like they did on yours. However, I suspect this has something to do with the interactions and everything else.
Any further advice would be GREATLY appreciated!
Thank you again.
Edit: So apparently I got to work how I wanted. Not entirely sure how but if I find out I will post it here! Thank you