Testimonial Grid Section Responsive Layout using Grid and Media Query

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

Getting more comftable with CSS grid and media query. I would explore in the future using Javascript to dynamically adjust sizing and location of components.

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

I got into an issue where my CSS for the part of individual styling of cards is becoming more lengthy. Luckily I was able solve it by building a more robust selector by just utilizing locally declared custom properties. By creating a locally scoped variables, I was able to modularize individual cards.

.testimonial-card:nth-of-type(1) {
  --testimonial-bg: hsl(var(--clr-purple-500));
  --testimonial-highlight-clr: hsl(var(--clr-white));
  --testimonial-detail-clr: hsl(var(--clr-purple-50));

  --author-name-clr: hsl(var(--clr-white));
  --author-status-clr: hsl(var(--clr-purple-50));
  --img-border-clr: hsl(264, 82%, 70%);
}

taking advantage of shared styles such as the ff:

/*shared styles for author info texts*/
.author-name {
  color: var(--author-name-clr);
}
.author-status {
  color: var(--author-status-clr);
}

There are many more robust solution and even more outside of plain CSS, but this gets the job done for now.

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

I would love see any feedback on responsiveness and maybe further recommendations that I may check out for.