Responsive Card Component Using Ancient Technique... Floats, and Media

Hey There! Criticism is needed (Jumping straight into questions.)

1. I was surprised to learn that <img> tags can't have a background color by simply adding a background property. It took me a while to research how to change the color of the main image and I still could not bring it to perfection.

2. My main focus for this project was to get familiar with "ancient" techniques. So I used "Floats" instead of "Flexbox" or "Grid". I'm a little hesitant about jumping into "Flexbox" or "Grid" because I feel like I'm not good enough with using "Floats". Should it be like that?

3. Another thing that almost made me mental was trying to stretch my image to cover the remaining margin and make it responsive. I made a lot of mess with the "Height" properties, I found it difficult to use the "Height" property more than the "Width" property.

A cleaner and more efficient method would be greatly appreciated. Best practice and ANY Advice/Feedback/Criticism will also be extremely helpful and appreciated.