/* ==================================================
   RECIPES
   ================================================== */

.recipeContent {
    max-width: 1100px;
    margin: 0 auto;
}


/* --------------------------------------------------
   Recipe header
   -------------------------------------------------- */

#recipeHeader {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: center;
    box-shadow: 1px 3px 18px -7px rgba(0,0,0,0.83);
}

.recipeImage {
    width: 100%;
}

.recipeImage img {
    display: block;
    width: 100%;
    height: auto;
}

.recipeContent .recipeTitle {
    width: auto;
    padding: 2em;
}

.recipeContent .recipeTitle h2 {
    font-family: "Baloo Paaji 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 2.4em;
    line-height: 1.15;
    margin: 0 0 0.2em 0;
    padding: 0;
    text-align: left;
}

.recipeContent .recipeTitle h3 {
    font-family: "Baloo Paaji 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.7em;
    line-height: 1.2;
    margin: 0;
}


/* --------------------------------------------------
   Serves and notes
   -------------------------------------------------- */

.recipeServes {
    margin-top: 1.5em;
}

.recipeNotes {
    margin-top: 1em;
}

.recipeNotes p {
    margin-top: 0.5em;
}


/* --------------------------------------------------
   Ingredients and method
   -------------------------------------------------- */
.recipeBody {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 2em;
    margin-top: 2em;
}

.recipeIngredients,
.recipeMethod {
    float: none;
    margin-top: 2em;
}

.recipeIngredients h2,
.recipeMethod h2 {
    margin: 0 0 1.5em 0;
    padding-bottom: 0.8em;
    font-size: 1.5em;
    border-bottom: 1px solid #C9C9C9;
}

/* --------------------------------------------------
   Ingredients
   -------------------------------------------------- */

h3.ingredients {
    margin-left: 1em;
    margin-bottom: 0;
    color: #333333;
}

ul.ingredients {
    width: auto;
    padding-right: 3%;
}

ul.ingredients li a {
    text-decoration: underline;
}


/* --------------------------------------------------
   Method
   -------------------------------------------------- */

.recipeMethod h3.ingredients {
    padding-bottom: 1em;
}

.recipeMethod p {
    margin-bottom: 1em;
    padding: 1em;
    border: 1px solid #EAE5D9;
    border-radius: 5px;
    box-shadow: 2px 2px 6px -4px rgba(0,0,0,0.40);
    background-color: #F0EFEC;
}


/* --------------------------------------------------
   Source
   -------------------------------------------------- */

.source {
    padding-top: 1.5em;
}


/* ======================================= MEDIA QUERIES ============================== */


@media screen and (max-width: 768px) {

    .recipeContent {
        width: auto;
        margin: 0;
    }

    #recipeHeader {
        grid-template-columns: 1fr;
    }

    .recipeContent .recipeTitle {
        padding: 1.5em;
    }

    .recipeContent .recipeTitle h2 {
        font-size: 2em;
    }

    .recipeContent .recipeTitle h3 {
        font-size: 1.5em;
    }

    .recipeBody {
        grid-template-columns: 1fr;
        padding: 0 0.5em;
    }

    .recipeServes, .recipeNotes {
        padding: 0.5em 0.5em;
    }

}