Responsive page, flexbox, positioning

While i build project i struggled with inline svg circles positioning. I got feedback from Slack that I should make them background. I'm used background-size to change size of circles, and made responsible circles positions. I did know how to center a card component on the center of page keeping body size as browser view size. But I used .body{ height: 100vh; display: flex; align-items: center; justify-content: space-around;} (1 vh = 1% of view field height). There is very important to use justify-content: space-around instead center value, otherwise container will be about center but not in.

I would to know how make img hided under border without additional changes on img's border