Vanilla CSS grid

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

I'm starting to get a little more comfortable with CSS grid. This project was a great way to develop that further. I used the nth-child pseudo-selector to order and style individual elements, but next time I think I would rather use specific classes to select individual items.

I initially thought the quotation mark background would be difficult, but I was able to do it quite easily using absolute positioning and a translate transform, along with z-index to make sure the card text appears on top.

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

I'm not sure if I implemented the grid in the best way. I ended up using order. I wonder if it's possible to write the grid in a way that it just flows correctly and is thus responsive, including for mobile, without making a lot of changes to each card. I had to reset the order attribute for each card, for example. I did use span instead of hard-coding the start and end rows though.

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

I'd like some feedback on how I could improve my CSS grid setup. Also, is it okay to use nth-child selectors as I did, or is it better to use specific CSS classes? My hunch is the latter, but I'm curious to hear what others think.