Responsive profile card component

👾Hello ANDRES GUEVARA, congratulations for your new solution!

I saw that you've used position: absolute to make the image stay between the two divs. Its kinda tricky to manage the profile image using position: absolute because you'll have less control over the image. margin-top: -50px;

My tip for you is to use a negative margin to change the photo position, is really easier, you write less code and have more control.

See the code changes below:

.card-main-info__img {
    /* position: absolute; */
    /* top: -32%; */
    border: 5px solid white;
    border-radius: 50%;
    margin-top: -50px;
}

👋 I hope this helps you and happy coding!