All solutions

• Most difficult part was adding responsiveness for mobile screens because of the layout
• Is it better to use repeating background span for the 5 stars or paste in <img> element 5 times for the icon. I used the background option, so the stars don't have spacing between them as shown in the design image.

• Nothing specific was difficult.
• I do not quite understand why writing row as 1/3 spans the div from 1st to 2nd row instead of 1st to 3rd. (interesting wording hope you understand)

• Used grid for the "Annual plan" widget, is it the correct way to style it? If not, what is the better way? (maybe flexbox?)
• For some reason, the header "Order summary" on expected design image looks bolder than what I could set with the font (max weight is 900).

• Is using !important with media queries the right way to do responsive design?
• How to inherit value of a different, separate property? Say, use section's background color as foreground color for buttons.

• Hardest thing was to get the "add to cart" icon aligned with text (still don't know how to achieve this without using absolute positioning).
• Have no clue how to center the smaller old price tag to the right of the actual price.
• Is there a better way to implement the "add to cart" icon?

Hardest thing was to design the score circle. What are the ways to make CSS more readable, is using OOCSS a good practice in this project and overall?