Social proof section

I confess that this project was a little difficult, at first I tried to think about how I could position the items in the simplest possible way (my goal is always to make simple and maintainable code), and I failed miserably.

At first I tried to make a grid in the Body with two columns at the top to put the Text and the ratings and three columns at the bottom for the cards, it didn't end up working as I planned (at least I realized that I needed to train more flexbox and grid XD).

In short, the solution I found was to make three elements: the texts, the ratings and the cards,

I did the positioning of the text and the evaluations using grid, I positioned the evaluations diagonally with a "subgrid" and in it I used properties grid-template-columns and grid-template-rows according to the position of the elements, grid-column-start and grid-column-end to position them within these grids (I did the same with the cards).

I have some questions:

• I couldn't position the Background photo using CSS, so I added an <img> tag in Html and styled it in CSS, is this a bad practice? Is there a better way to have this done?

• The Background photo was cut off in the mobile layout, how could I fix it?

• Is there a simpler way to position elements diagonally without using as many grid rows and columns as I did?

Feel free to comment!