Responsive Testimonials using Grid and media queries

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

I'm most proud of how I used CSS Grid with nth-child selectors to precisely position each testimonial card across multiple breakpoints. It was really satisfying to see the layout adapt fluidly across devices, from mobile to widescreen. I'm also proud of how I used em units for breakpoints to improve accessibility and scalability of the layout.

If I were to do this challenge again, I would spend more time organizing and reusing utility classes to reduce redundancy in my CSS. I might also experiment with using clamp() for more fluid typography and spacing. I played with it last challenge but want to dive further into the concept.

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

One of the biggest challenges was getting the grid layout to match the design at different screen widths, especially for the tablet and desktop breakpoints. Using grid-template-areas at first felt limiting, so I leaned into manual grid positioning with nth-child, which gave me finer control.

I also had trouble applying a semi-transparent box-shadow using HSL with CSS variables. I learned that to interpolate (a new word for me!) an alpha value into an HSL color, the custom property must be defined without the hsl() wrapper, just the raw values. While I simply used the :root value I created instead, I'm going to try this with the next challenge that uses box-shadow.

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

I'd appreciate feedback on:

My use of em units for media queries...are there best practices for choosing the base value?

Whether my grid positioning using nth-child is maintainable or if there’s a cleaner way to handle this for large-scale layouts.

How I could improve my utility class naming or structure for scalability and clarity.