Mobile-first Social-Proof-Section (BEM & Utility First)

This time I went for a mobile-first approach, building the desktop and tablet visualization through Media Queries. I also tried to implement BEM into my workflow, which made it easier for me to go back and forth between classes.

For the desktop and tablet visualization I used min-width: 1400px and min-width: 768px (each in their respective media query), both in which I used display: grid with a grid-template-columns: 45% 55%; and grid-template-columns: 50% 50%;.

-Could it have been easier to achieve this using flexbox?

To align the items slightly to the right/below the next I played with margin values using utility classes such as (for the ratings):

.margin-left-5 {
        margin-left: 5rem;
    }
.margin-right-5 {
        margin-right: 5rem;
    }

and (for the review cards):

.margin-4 {
        margin-top: 4rem;
        margin-bottom: -2rem;
    }

-What is a better more efficient way to achieve this same result?

-Also, it would be really helpful if you could please tell me how I can improve!

Regards!