Testimonials Layout using CSS Grid + Flex

What are you most proud of, and what would you do differently next time?

Despite a lot of struggling, I did finish the project and it looks...somewhat like the mockup. I am not well-versed with Grid yet and it shows. I think I made quite a few errors, but I stuck with it and finished and that's what I'm most proud of. While I did not have access to the tablet mockup, I did try to make sure the grid reduced appropriately regardless.

What challenges did you encounter, and how did you overcome them?

Working with the grid attributes to get the layout correct. This is the first time I've ever attempted this style of layout and it was very frustrating. I relied heavily on the browser inspector to give me a more visual idea of what was happening with my code as I was coding. The rulers and grid section numbering inside of Chrome's inspector was invaluable to this project, but also shows that I just don't have the experience with Grid yet to feel confident in doing it and doing it well.

What specific areas of your project would you like help with?

1. What could be refactored in my CSS to make it simpler? I tried combining as much code as I could and ultimately found that I was overwriting myself as I was doing it which results in me splitting EVERYTHING into classes so I could better track where I was getting stuck. My primary cards have a total of three classes on just the top level card and that seems excessive.

2. On desktop, what could I do to improve the handling of the grid layout? It feels very clunky to me. I'm not sure if that's just my lack of understanding the concepts of Grid or if I'm overthinking it. Realistically I would have liked this to reduce from desktop to mobile and back again with a little less reliance on media queries, but as I worked through this I genuinely could not figure out a way to make that possible. It feels like grid is intended to be very precise whereas flex allows you to utilize percentages and math to scale responsively.