Order summary component using css flexbox and media query

Hey Emmanuel You did amazing work congratulations for completing this challenge

to fix accessibility issues :

• You should use <main class="container"> and wrap inside it <div class="order-summary-card"> so all page content should be contained by landmarks.

• Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h1 instead h2 and change font-size if you want .

• You can wrap your <div class ="attribution"> in a footer tag like this <footer><div class="attribution"></div></footer> to avoid accessibility issues. and you can comment the footer tag to hide it and get more awesome view

To make your code more Responsive

• to make background-image responsive you should use this

 body{
    background-size: contain;
    background-repeat: no-repeat;
    }

• use <a href="#"> cancel order</a> instead <div>cancel order </div> to make it more semantic.

• don't use multiple <br> to make content line by line but give div.text width:80% as example and text-align:center.

• it's recommendable to use <p></p> instead of using div.texts to make it more semantic for screen reader.

• remove extra padding and margin from any tag using this :

*{padding:0px;margin:0px}

• you can use variables in css and save colors or fixed sizes in variables like this :

:root 
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}

h1 
{
font-family:var(--font-family)/*to call  value of the variable*/
}

• you should follow style-guide to get more styled page

Regardless You did amazing I hope this is useful to you... Keep coding👍