Flexbox, media Query, p inside list to f create spaces between

nice! ✅ I'm already knee-deep in the midst of this challenge. :D making the layout responsive is killing me :)

some quick notes on your solution :

• i think you used the wrong color hex for the text elements (not blaming you though , the colors made me insane too 😵‍💫)
• in your Nutrition List, to add the border-bottoms , you could use :not(:last-child()) to avoid the last row to have a border-bottom
• for big , heavy projects , developers have a specific Naming convention that they use throughout the designing process . i'm not saying it was necessary for this challange , i'm just saying by using it and sticking to one, you'll learn the Ups and Downs of it and learn to quickly name the elements based on the context. one of my favorite Naming conventions is BEM Naming . you can check that out Here

To make the HTML more semantic, you can replace the <div> elements with more appropriate HTML5 semantic elements that better describe the purpose of the content.

for example using <main> tag is used to wrap the main content of the page.

<article> tag is used to represent a complete, self-contained piece of content (the recipe). <figure> and <figcaption> tags are used to represent the image and its caption. <section> tags are used to group related content sections (like preparation time, ingredients, instructions, etc.). <h1>, <h2>, <strong>, <ul>, <ol>, and <table> tags are used to provide semantic headings, lists, and tables for better accessibility and SEO. The <footer> tag is used for the attribution section at the bottom of the page.