Profile-card-component

How do I make absolutely positioned elements responsive? Initially I absolutely positioned the img profile with top and left offsetting. But as both the viewport width and the .card container's height decreased, the absolutely positioned img would not stick to the bottom portion of the blue .img-bg-card. It would stay in the same position even though I set the values as a percentage. What gives?

Ultimately I gave up on absolutely positioning the image. Instead I text-aligned it to center and shifted it up 50% of its width via transform: translateY(-50%);