Blog Preview Card With CSS @scope

What are you most proud of, and what would you do differently next time?

img:not(p *) {
    display: block;
    max-inline-size: 100%;
  }

I think this is a smarter way to reset img. The best part is that you can wrap it in a @layer, so it doesn't matter if the specificity is higher.

What challenges did you encounter, and how did you overcome them?

I had a little problem with the illustration asset being a pixel higher than it should have been. After some research, I discovered that is a known bug in Figma when exporting an image from a non-integer coordinate.

What specific areas of your project would you like help with?

I'm mostly insecure about the readability, so I would appreciate if you have any questions about the code, such as "why did you do this and not that?" or if you can point out any part that seems confusing or unnecessarily complex.

Useful Resources

• CSS Scope by Miriam Suzanne
• Inclusive Components / Cards / #The pseudo-content trick by Heydon Pickering