All solutions

I had an issue with the first illustration on the page. When importing through the svg sprite the illustration is rendered improperly, gradients are not visible and it seems like the layers are mixed up. I double checked the svg sprite because it was made in 'svg sprite generator', I looked for missing lines of code but it was right. I ended up importing the image through <img>. I don't know the cause of this, I commented out the lines with <use> so I can retry this anytime. (I posted an image of the problem at the bottom of the readme file)

I wrote a detailed readme so feel free to check it out.

In this challenge I made use of pseudo elements and background-image/attachment/etc. The only issue I had was adding a margin to the rating stars individually. I didn't want to mark them up in html with another div so I decided to let them in this state.

Is there a way to individually style ::before elements?

grid-template-areas did not respond to media query changes. However after switching from grid template to basic grid properties everything worked as intended.