Responsive recipe-page using pure CSS and HTML

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

I learnt how to use ::marker pseudo-element for styling list items and :not, :last-child pseudo-classes. During the development I gained experience using tables and customizing their style. At the end it was inconvinient to meet the requirements of responsiveness for mobile view because of the image of the recipe. Probably in my next project I will work with mobile-first workflow.

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

At the end it was inconvinient to meet the requirements of responsiveness for mobile view. The reason for that is the recipe-image in mobile view fills up the entire space till the end of the top part of the screen. I set a 2.4rem padding on the article which was perfect for the desktop view. However, in mobile view it's a problem for the image. I don't think I did a nice solution for the mobile view but I solved it by adding a wrapper div for the image and set padding for every section.

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

Is there a best practice for the recipe image's responsiveness? I mean mobile view full (top) screen and desktop view (with padding).