Orden Summary Component

Great attempt at this project 🎉

I can see you have made effort to include CSS variables which is always nice to see :)

here are some improvements that can be made:

• avoid setting height with vh on body to make the page full screen. This can be problematic on phones and smaller screens, especially when the project gets more complex.

  • one way to get around this issue is:

html,
body{
  height: 100%;
}

main{
  min-height: 100%;
} 

• don't litter the HTML document with <div>, instead make use of HTML5 semantic markups e.g. <section> or <article> for the card component

• supply a padding top on the body element so that it doesn't cause any alignment problems or clip out your card when the phone is in landscape mode.

  • you could alternatively, supply a margin top to the card to achieve a similar effect

• make use of rems for border-radius. On some screens the border-radius can cause un-intended side effects when you declare them with pixels

• use some reset properties for CSS e.g. you could display <img> as:

img{
  display: block;
  max-width: 100%;

I hope these help. Happy coding :)