Profile card component

I completed this challenge to keep my CSS and HTML skills sharp. I struggled quite a lot with a few elements of this design, particularly the profile picture: I couldn't figure out the best solution to have it split over the 2 areas my first attempt was to use a overly complex css grid inside the card that overlaid the image over 2 rows, this method worked but seemed unnecessarily complex for such a simple task. On my second attempt I used position relative and a minus value for the top which again worked, I finally settled on just using a minus margin value as this seemed the simplest option. I had a similar problem with the background top and bottom circles. I finally got them positioned after fiddling around with the background-position values but it was very trial and error until it looked right.

My question to the community is what would the best practice way to position these elements be, would what I have done be acceptable or is there a standard way that would be expected.