QR code component with Flexbox, BEM

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

Initially, I styled everything in a hurry, and when I started making edits, I got very confused by my own CSS. So, I’m proud that I took the extra time to redo and reorganize my CSS by using Sass and BEM. However, my CSS was pretty simple so I’m not sure if I used Sass effectively.

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

The greatest challenge was making my design match the Figma file as closely as possible. I had never used Figma before, so figuring out margin, padding, and other dimensions from Figma was a bit tricky. I made sure to take my time to notice all the details.

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

1 I’d like to make sure I’ve applied BEM principles correctly. I have:

/* Block */
.card {}

/* Elements */
.card__qr-code {}
.card__heading {}
.card__sub-heading {}

2 This is my first project, so any tips on best practices for writing/organizing CSS and HTML are greatly appreciated. Or, if there's any part of my CSS that could have been cleaner.