Testimonials Grid Component - Used SASS and 'componenty' logic

Edit: I tried fixing the small styling variances but I'll stop. It seems (to me) that my figma design differs from the generated screenshot comparison.

(Seeking advice on: automating a mosaic/masonry-layout without a library. This is a rather complicated matter so I don't expect a response besides resources that I might have already looked at (e.g.: the masonry library).)

Alrighty - so I wanted to do something more interesting than just build this grid out and call it a day.

What I have attempted is to build this with some scalability in mind, as if it was a 'real' component in a site. If we add dark or light to any particular .testimonial we will achieve a different kind of styling immediately. Suppose this data was coming from a JSON file with a given theme for a card. Then we can go one more layer deep and add a particular background-color utility class, for example ..bg-gray-300 or .bg-purple-500. We have now set a different background on top of the dark/light styling.

I kept the font styling identical per dark/light testimonial. I also kept the borders around testimonial-author-images more minimal. If I spent more time on this project I would have added a few more utility-class type of scenarios that would style them more uniquely if a specific bg-col was chosen.

I also made the quotation-mark into a utility class. So if you add highlight as a class to any given testimonial you will add a quotation mark. They differ according to dark/light background colors. The purple testimonial has its' own unique color since it was the original 'highlighted' testimonial.

What I wish I spent time on: writing some JS to create a mosaic-layout with css grid that automatically plots the various testimonials according to the viewport but quite frankly I'm not ready to dive into that sort of Javascript yet. It would take too much time due to the various calculations I'd need to consider. So for now a simple grid with grid-template-areas will have to do.