Recipe page

Nice job! The implementation looks very similar to the design picture. The only problem i found is that your table is not working correctly. Here's my approach for the table:

      <section id="nutrition">
        <h2>Nutrition</h2>

        <p>The table below shows nutritional values per serving without the additional fillings.</p>

        <table>
          <tr>
            <th>Calories</th>
            <td>277kcal</td>
          </tr>
          <tr>
            <th>Carbs</th>
            <td>0g</td>
          </tr>
          <tr>
            <th>Protein</th>
            <td>20g</td>
          </tr>
          <tr>
            <th>Fat</th>
            <td>22g</td>
          </tr>
        </table>

      </section>

and my css

#nutrition table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-top: 1rem;
    ;
}

#nutrition tr {
    border-top: 1px solid var(--stone-900);
    height: 3rem;
    ;
    width: 50%;
}

#nutrition tr:first-child {
    border-top: none;
}

#nutrition th {
    padding-left: 2rem;
    width: 50%;
    color: var(--stone-600);
    text-shadow: none;
}

#nutrition td {
    color: var(--brown-800)
}

So to create a table with headers on the left, you can just put <th> and <td> in the same row. And I used this line #nutrition tr:first-child { border-top: none; } to clear the top border on the first row to get the desired behavior