The images

The images present us with an interesting situation, because they all have a border radius, but in some situations, it's different.

There are a few options here:

• Use utility classes on all the images
• Rely on the context and use descendant selectors (or *__image selectors)
• Create a "default", and overwrite it when needed, with either of the options above

I feel like the images are a great example of finding a balance and thinking big picture first.

In our base layer, we could do this:

@layer base {
  img {
    border-radius: var(--border-radius-3);
  }
}

This is a low specificity selector, so even if you don't want to use layers, it's very easy to overwrite later on.

Then, we could modify the images inside our cards later on with a .card > img or .card__image selector.