Social Proof Section with HTML and CSS

Hi there! Thanks for viewing my solution! :)

I struggled with this for about 3 hours because I was experimenting with grids. I resorted back to flexbox instead. I guess there is much for me to learn for CSS.

Just a few questions.

1 - Initially my ratings section in the mobile view looks too small compared to the rest of the layout, even though I took away the margins and paddings on the sides. It was only when I used the inspect tool and realised "inline-block" in the parent container actually worked. May I know why "display: flex" in the parent container did not extend the width (of the ratings) fully? - You may check it in line 141 of my css file.

2 - I'm not familiar with grids, but is there a feasible way to achieve this layout?

3 - I used CSS transform to adjust the position of the cards and ratings in the desktop view, is there a better way to achieve this effect?

4 - May I know what can I do to improve my code?

Thanks again!