Order Summary Card using HTML and CSS

Hi RavanCod, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

1- Every pages needs a <h1> to show which is the most important heading. So replace the <h2> with <h1> and follow the sequence h1-h5

I noticed that at higher resolutions, the background image is broken, to fix this we can do the following:

As you used a max-width in the main tag, the right thing would be to use the images and background colors in the body:

main {
    /* background-image: url(../images/pattern-background-desktop.svg); */
    /* background-size: 100% 50vmin; */
    /* background-repeat: repeat-x; */
    /* background-color: var(--paleblue); */
    margin: 0 auto;
}

body {
    background-image: url(../images/pattern-background-desktop.svg);
    background-size: 100% 50vmin;
    background-repeat: repeat-x;
    background-color: var(--paleblue);
}

The rest is great!!

Hope it helps...👍