All solutions

Root and default font-size

Instead of setting the font-size to 15px (as mentionned in the style guide). I used 16px*0.9375 = 15px.

:root {
    font-size: 0.9375rem;
}

I use a value relative to rem that equals to fifteen if the default font size is 16px instead of 15px directly. I do this to take into account the default font size set by the user agent. It is 16px by default but user may override that value in browser settings.

It allows to take into account the wish of a user to have smaller/bigger text

Not setting font-size on all header elements

I set the font size for h3 but use default UA style for h1 h2. It works where I tested it but it could be a problem : a user agent could have values that make h2 bigger than h1 or h2 for example. A safer thing would be to define it explicitely for h1 and h2

h3 {
    font-size: 1.3em;
}

max-width on content instead of fluidly increasing the margin

In the last challenge I did. I used a system where the margin slowly increase as the viewport widens.

This time I just set a fixed margin. There is a maximum width for the content. It is only when that max width is reached that the margin increase.

It is simpler at the cost of being slightly ugly when the viewport is wide but not wide enough to have reached the max width of the content.

How to avoid duplication when multiple BEM modifiers must undo declarations?

I used BEM for the three cards : .card, .card--sedan, .card--suv and .card--luxury.

A problem I have is that there are declarations in the .card that must be undone by the modifiers.

I end up with duplication:

.card--sedan {
  /* a bunch of declarations that undo declarations in .card {} */
}

.card--suv {
  /* a bunch of declarations that undo declarations in .card {} */
}

.card--luxury {
  /* a bunch of declarations that undo declarations in .card {} */
}

How to avoid that duplication?

Is there a better way to do the 5 stars than content: url(..) ' ' url(..) ' ' url(..) ' ' url(..) ' ' url(..); ?

I noticed I tend not to make the text bigger when doing the desktop layout.

What's a good CSS reset file? In my projects I start thinking I don't need one then add bits and pieces of resets as I progress.

What's a clean way to have a smooth transition between the mobile design and the desktop design. for the main size I used width: clamp(calc(500px * 0.85), 66%, 60rem);. 500px is the breakpoint and 0.85 is the width of the main element. It ensures that the width doesn't suddenly 'pop' to a smaller size when transitioning from mobile to desktop.