Responsive mobile-first recipe page

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

I am most proud of how quickly and easily I was able to complete everything. I am also quite proud of the mobile-first design approach that I used as this was my first time building something using that approach. And this was also my first time using css custom properties and they're pretty cool and very helpful. One thing I would do differently is I would plan things better before I actually start coding. I have a tendency of rushing into starting, although that's only because I don't want to "overplan", so I guess it's just about finding a balance.

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

I didn't really face too many challenges, I guess there were just a few things that I had to search up, but it wasn't anything that I didn't end up finding a solution to/solving myself. I did struggle to decide how to go about writing my media queries. I also didn't know how to structure my html regarding the use of semantic html and the image specifically, but I ended up putting the image in a header tag on its own.

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

Due to this being my first time using a mobile-first design approach, the main thing I want feedback on is whether or not I went about it in the correct manner. I'm not really sure whether or not I wrote my media queries properly so I would like to know media query best practices. I would also like feedback on whether I used the css custom properties properly because this was also my first time using those. Lastly, I'm still trying to get a proper understanding of using semantic html, so any feedback on how I did regarding that would be appreciated.