Mobile first workflow and CSS Grid

Hi, guys!

I have a question about the 5-star in the review cards. Let me explain how I did it first:

• I used a <div> and set the star icon as its background-image.

• To get 5 stars in total, I set the property background-repeat: space and adjusted the <div>'s dimensions.

• Now comes the "but": I couldn't work with the spacing to match the design given since a wider <div> would fit more starts into it after a certain breakpoint.

• And the question: is it possible to give extra spacing using the icon as background or is it only accomplished by adding the star icon itself as an html element and styling it from there?

Many thanks in advance and feedback regarding anything else will be appreciated!

Happy coding!