Order Summary component

Hiyo,

Your solution looks great! One thing I noticed is that you set a min-height: 128vh on the main which sounds oddly specific >.< It also adds a lot of extra space above and below your component. 100vh would be probably enough.

There's also a few best practices you may wanna consider:

1. Don't set a height on your elements, in best case it's not needed, in worst case it will give you trouble. There's only a few use cases I can think of now where height might be useful (like setting a min-height on the body/main is one of these cases).

2. Instead of fixed width, you could use max-width, that would improve responsiveness.

3. If you can't think of a meaningful alt text for your images, just leave them blank so the screen readers skip it. Alt text should provide a descriptive text alternative for people who can't see the images. In some cases though they're only there as a decoration so you either wanna consider adding them with css or leave their alt text blank as suggested ^^ Also, you'll not need to use words like icon, image, illustration, etc, by using the img tag you make it obvious what they are.

4. If you feel comfortable with this, you could look into relative units, like rem, em, etc. This would help with accessibility.

I hope this helps. Good luck ^^