Mobile first soultion using flexbox

This is the second project I'm trying and it way harder then expected. Thank you so much for any and all feedback you offer.

1. In the guide, it said that tr and size had to be in span in order to be able to add the above styling (.c-product-card__btn {display: flex;align-items: center;gap: 1ch;}). However, I had to remove that styling in order for it to be centered by itself. Can anyone explain to me what happened there?
2. Why doesn't putting a border radius on the container work? Why is there still no border-radius after I added it to the image?
3. When I try to center the desktop, the whole mobile gets ruined. How do I stop that?
4. I had to manually input a height in the picture tag in order for it to work. What was I supposed to do instead?
5. I had to put a negative margin because there was a gap between the pictures and the text. Is there another way to prevent it?
6. How do I break up the text to make the exact placement of the words like in the design?
7. Is there any unnecessary code, or is there a better way of doing this than what I did? And of course, any other feedback would be greatly appreciated.