Order Summary Component - HTML, CSS, Google Fonts

As mentioned already by fellow members there are some issues with the semantics. You also should always consider having one h1 on every page that describes its content. For example this page can have the "Order summary" text be inside an h1 as it perfectly describes the main purpose of this page, you can then style it differently to match the design. I'll also advice to check the report of your solutions as it helps you find issues like these. Good luck!

The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

Sections with no headings do not appear in the document outline. If you did want force the inclusion of such an HTML block inside the document outline but not affect the visual output in any way, you could include a heading but hide it: Source - MDN

• in your code there is several blocks of code with no other content in it, I am of the opinion that there are other elements that could have been used, a heading element and a paragraph for example.

Hey, it's not just the image, the whole card seems to be off on smaller screen sizes :)

Few things you could do:

1. Add your readme to the project.
2. Using ids are discouraged, unless you have a good reason to do so. In this case, simple classes would do the job perfectly.
3. You're using sections instead of choosing the semantically correct elements, like divs, paragraphs and titles.
4. Instead of width and height, you could use min- and max-height, min- and max-width to make your solution more responsive. Using % is useful sometimes but can backfire, as it does in your code.
5. For your hero image, you could add it to your html so it's easier to style.

Fluffy Kas has made a great point on ids, also i'd like you to be aware of specificity especially for bigger projects. This is an article that might help you understand what i mean. Keep coding :-)