Profile Card Component - flexbox and mobile-first

Well I have to admit....I had to look over some previous solutions to figure out those background circles!! I knew I wanted to place them in ::before and ::after pseudo-elements, but because they were so large it was so challenging to get them placed properly. I'm hoping folks can review my code a bit and let me know if there's anywhere that I can make my code more DRY. Also, I used the Figma design which was very helpful but it doesn't seem to really "match up" well with regards to margins and paddings. Is that normal? How do you accommodate for that when moving the design to the actual code? Thanks!!