A little of CSS Grid, responsive and with box-shadow. A try to be DRY;

Hi, Paulo! 👋

About your CSS, you grouped the CSS properties and give a whitespace to separate each group. That is great. It can help you find certain properties faster. It looks like the size properties are always at the top, am I right?

For the order of the CSS properties, I use the Concentric CSS — Concentric-CSS/style3.css at master · brandon-rhodes/Concentric-CSS · GitHub. I was manually writing my CSS properties. Now, I use an NPM package called css-declaration-sorter with PostCSS. You need to do some setup to get it up and running.

As a side note, you need to know that grouping CSS properties and the order of writing the CSS properties are not necessary things to do. It is just a preference.

For CSS selectors, I recommend following this guide:

• Keep the CSS specificity as low and flat as possible: Don't nest selectors unnecessarily.
• Avoid id selectors: Do not use id selectors for styling. They mess up specificity because they are too high (the most important reason). Also, they are unique identifiers. So, they are not reusable on the same page.

For the background image, I do not see any problem. I used a media query to change the mobile background pattern to a desktop one.

I hope this helps. Happy coding! 😄

You got some unnecessary code in index.html file

<article class="card"> <div class="img-hero-wrapper"> <picture class> <img class="img-hero" srcset="./images/illustration-hero.svg" alt="Someone dancing"/> </picture> </div>

Inside the main element just like

<main> <img class="img-hero" srcset="./images/illustration-hero.svg" alt="Someone dancing"/>

Then proceed to add the h1 element right under follow by the p tag

Also the section inside the main is not needed cause its not a new section you're creating just a card. TO learn more about sections https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section so you can remove the picture tag and instead just give the img a class

<section class="plan"> <picture> <img src="./images/icon-music.svg" alt="A musical note" /> </picture> <div> <h5>Annual Plan</h5> <p>$59.99/year</p> </div> <button>Change</button> </section>

instead do this

<div class="plan"> <img src="./images/icon-music.svg" alt="A musical note" /> <div class="plan2"> <h5>Annual Plan</h5> <p>$59.99/year</p> </div> <button>Change</button> </div> </div>

Then you can make the necessary changes in your css file