Responsive Recipe Card using CSS media queries

What are you most proud of, and what would you do differently next time?

Not over-relying on flex box, and creating/styling the table (I know that's not really a big deal, but I try and avoid tables because I hate them so much for some reason). Also, using more semantic HTML instead of throwing divs all over the place, and finally, how comfortable I've gotten implementing Figma designs.

What challenges did you encounter, and how did you overcome them?

The mobile layout of the Card, I had trouble implementing the image change, specifically getting it fixed to the top of the page with full width. I thought it would be straightforward, but the I kept running into issues (the image would not take up the full width, instead it would just make the entire card smaller, things like that, etc.). I tried position absolute, but then it ignored the content below it. Finally, I got it working by setting position: absolute; top: 0; left: 0 and then moving the card content down like 300px to be below the image, but 1) that didn't feel right, and I'm sure it's the wrong way to do it, but 2), most importantly, I just didn't like the way it looked. Of course if this was an actual company I would stick to their design, but since this is going in my projects I went with what I thought looked best (image still has padding around it).

What specific areas of your project would you like help with?

Even though I don't like the way it looks so I went another route, I do want to know: what is the best way to implement the correct styling for the image for the mobile layout (fixed to the top, full width)?