Social proof section with grid/flex layout SCSS and dark theme

First of all, great job on your solution.

The margin between the review stars' containers is a little bigger than the design, and the font size is a bit smaller but other than that, fantastic work.

As far as SCSS is concerned, you won't really see its power in such a simple solution as this one. In fact, it might even be overkill, but for learning purposes, it's fine that you used it.

You'll see the true power of SCSS when working on multiple-page websites.

For example, if you want to show two separate cards on a webpage based on the user's subscription status, you can use the @if statement in SCSS to conditionally only apply the CSS you need. Removing unnecessary CSS can help improve page load speed. It's also just good practice not to include unnecessary code.

In addition, you might find yourself repeating CSS for different pages that are similar but not exactly the same. Mixins help keep your CSS DRY by storing all the shared code in one place.

Finally, you mention that you used mixins instead of media queries. Those two serve different purposes.

A media query i.e. @media is used for breakpoints and only applies CSS based on the breakpoints you specified while a mixin i.e. @mixin stores shared CSS that can be used almost anywhere in the CSS.

The organization SCSS provides is INCREDIBLY helpful in larger projects.

Hope all this helps.

All the best with your other solutions.