Responsive Recipe Page CSS

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

I'm sort of happy I was able to make it responsive, but there's lots of areas where I can improve on in terms of the code when it comes to responsive design.

Next time I might try to do mobile first approach, where I code out the mobile view first then expand on the larger sizes.

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

There were two areas that I struggled with:

1. adding padding within ul/ol, as well as aligning the text. I was able to solve it by using list-style-position: inside and ::marker to decorate the bullet points. In terms of aligning the text, I discovered that position: relative helped me add space between the bullet points and the paragraph. text-indent in combination with padding-left made the paragraph align on the left
2. responsive sizing on mobile screen. I used fixed sizing in the original code, so I struggled with making it responsive in the mobile view. I solved this by using em/%. Next time I'll try to not depend entirely on given sizes by the Figma design, and use responsive units of measurement instead.

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

I feel as if my code could be condensed more, but I'm not sure how. There were a lot of repetitiveness that I could do without. In addition, I don't know if I overdid it with the classes and tags in the html.

If there's better approaches to responsiveness than what I wrote, please let me know. I will gladly take criticism from any weak areas you may spot.