Testimonials grid section

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

What I learned:

1. more practice on the grid column and row spans.
2. the grid putting in order. By adding "grid-column-start: -2" on the 5th card, I can make the 5th card the first one put in the grid layout.
3. more experience on CSS specificity. If I only use "section.testimonial-card" selector to set grid-column and grid-row to span 1 on media query of the mobile version, the properties cannot be override. But if I add "nth-child(n)" to it, the selector's specificity increases and then overrides the span successfully.
4. my first experience using background-image, background-repeat, and background-position.

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

I cannot find exactly the same spacing such as the layout method, padding, margin, line-height, or the exact color from the example jpg files, as I did not unlock pro to get the Figma files.

Therefore I made all the magic numbers named variables, and putting them together under :root. It's more convenient for me to modify them for countless times by try-and-error to get closer to the example jpg.

The spacing is still not the same as the example, such as the words' length and height on the last card on the mobile version. But I'm happy with the result and don't want to waste time on this trivial details.