Mobile first, pure CSS

Hi Mallory,

I see you've used two stylesheets (mobile.css & style.css) , when in fact you only need to use one here. You should move all of your styles from mobile.css into your style.css and place it towards the top. As the name suggests, the C in CSS means cascading, which means styles towards the bottom of the file will overwrite those at the top if they have the same class name or CSS selector. Therefore, if you place your mobile styles towards the top, these will be read first. Then, to style it for desktop you should place all of your desktop files in a media query underneath your mobile styles. Something like this:

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');

* {
  margin: 0;
  padding: 0;
}

:root {
  --sedans-color: hsl(31, 77%, 52%);
  --suvs-color: hsl(184, 100%, 22%);
  --luxury-color: hsl(179, 100%, 13%);
  --paragraphs-color: hsla(0, 0%, 100%, 0.75);
  --lightgray-color: hsl(0, 0%, 95%);
}

...

.cards {
  display: flex;
  flex-direction: column;
  padding: 4rem 1.5rem;
}

// rest of your mobile styles
...

@media screen and (min-width: 768px) {

 // desktop styles go in here, and these will overwrite your styles above due to the 
     cascading nature of CSS

 .cards {
   flex-direction: row;
   margin: 0 10rem; 
 }
}

You will now no longer need to use !important to overwrite the styles and your import in your HTML can simply become:

<link rel="stylesheet" href="./css/style.css">

Hope that helps you.

Thank you so much for your precise answer, it indeed fixed my issue and I'll make sure to do so in the future on my small projects ! It was a great help, have a lovely coding day !