/*
 * Started : 18-DEC-2025
 * Updated : 18-DEC-2025
 */

*,
* ::before,
* ::after
{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body
{
   color: black;
   /* font-family: "Noto Sans", "Oxygen-Sans", Ubuntu, Roboto, Helvetica, Arial, sans-serif; */
}

@media (min-width: 600px)
{
   .recipe_main
   {
      display: grid;
      grid-template-columns: repeat(2, minmax(300px, 1fr));
      grid-template-areas:
         "description main-image"
         "ingredients method";
   }
}

.description
{
   border: thin solid black;
   background-color: palegoldenrod;
   grid-area: description;
}

.description ul
{
   display: flex;
   list-style-type: none;
   gap: 10px;
}

.description img
{
   width: 60px;
}

.main_image
{
   border: thin solid black;
   background-color: lightcyan;
   grid-area: main-image;
   display: flex;
   justify-content: center;
}

.main_image img
{
   inline-size: 100%;
   max-inline-size: 400px;
}

.ingredients
{
   border: thin solid black;
   background-color: aquamarine;
   grid-area: ingredients;
}

.method
{
   border: thin solid black;
   background-color: gold;
   grid-area: method;
}

.recipe_notes
{
   border: thin solid black;
   background-color: lavender;
}

.ingredients ul, .method ol
{
   /* If I don't add this, the bullets will not be in line with the rest of the text. */
   padding-inline-start: 20px;
}

.recipe_notes figure
{
   border: thin solid red;
   background-color: lightskyblue;
}

.recipe_notes ul
{
   list-style-type: none;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   row-gap: 10px;
}

.recipe_notes figure
{
   width: min-content;
}