.recipe-page {
    .recipe-page--content {
        width: 100%;
        max-width: var(--content-width);
        background-color: var(--lighter-blue);
        margin: 0 auto;
        .recipe-page--header {
            display: flex;
            flex-direction: column;
            gap: 10px;
            .recipe-page--image {
                position: relative;
                margin-bottom: 20px;
                picture > img {
                    height: 250px;
                    object-fit: cover;
                }
            }
            .recipe-page--star-separator {
                width: 40%;
                margin: 0 auto;
            }

            .recipe-page--image .recipe-page--star-separator:is(*, #hey) {
                position: static;
                transform: translate(0px, -50%);
            }

            .recipe-page--star-separator:not(.mobile-tablet-only) {
                position: absolute;
                bottom: -15px; /* tu peux ajuster la distance */
                left: 50%;
                transform: translateX(-50%);
            }
            .recipe-page--title {
                font-size: 18px;
                text-transform: uppercase;
                color: var(--blue);
                font-weight: 800;
                font-family: var(--font-family-montserrat);
                text-align: center;
                line-height: 20px;
                margin: 10px 0;
            }
            .recipe-page--related-products-image {
                margin: 0 auto;
                picture > img {
                    height: 250px;
                    object-fit: contain;
                }
            }
        }
        .recipe-page--details {
            padding: 0 20px;
            .recipe-page--ingredients,
            .recipe-page--steps {
                ul, ol {
                    list-style: none;
                    padding-left: 25px;
                }
                ul li, ol li{
                    position: relative;
                    > span, > span p {
                        line-height: 20px;
                        font-weight: 500;
                        font-family: var(--font-family-montserrat);
                    }
                }
                ol li{
                    padding-bottom: 30px;
                }
                ul li::before, ol li::before{
                    position: absolute;
                    content: "";
                    left: -1.5em;
                    top: 0.2em;
                    width: 15px;
                    height: 15px;
                    background-image: var(--blue-star);
                    background-size: contain;
                    background-repeat: no-repeat;
                }
            }
            .recipe-page--ingredients {
                margin-top: 30px;
                margin-bottom: 30px;
                .recipe-page--ingredients-title {
                    font-size: 18px;
                    text-transform: uppercase;
                    color: var(--blue);
                    font-weight: 700;
                    font-family: var(--font-family-montserrat);
                    padding-bottom: 20px;
                }
            }
            .recipe-page--steps {
                margin-top: 30px;
                .recipe-page--steps-title {
                    font-size: 18px;
                    text-transform: uppercase;
                    color: var(--blue);
                    font-weight: 700;
                    font-family: var(--font-family-montserrat);
                    padding-bottom: 20px;
                }
            }
            .recipe-page--star-separator {
                width: 45%;
                margin: 0 auto;
            }
        }
    }

    @media screen and (min-width: 21rem) and (max-width: 23.438rem) { /* 375px */
        .recipe-page--content {
            .recipe-page--header {
                .recipe-page--star-separator:not(.mobile-tablet-only) {
                    bottom: -18px;
                }
            }
        }
    }
    @media screen and (min-width: 24rem) and (max-width: 26.563rem) { /* 425px */
        .recipe-page--content {
            .recipe-page--header {
                .recipe-page--star-separator:not(.mobile-tablet-only) {
                    bottom: -21px;
                }
            }
        }
    }
    @media screen and (min-width: 48rem) { 
        .recipe-page--content {
            .recipe-page--header {
                .recipe-page--title {
                    font-size: 35px;
                    line-height: 40px;
                }
                .recipe-page--image {
                    picture > img {
                        width: 100%;
                        height: 400px;
                        object-fit: cover;
                    }
                }
                .recipe-page--related-products-image {
                    picture > img {
                        /*width: 100%;*/
                        height: 100%;
                        /*object-fit: cover;*/
                        max-height: 44rem;
                    }
                }
                .recipe-page--star-separator {
                    width: 25%;
                }
                .recipe-page--star-separator:not(.mobile-tablet-only) {
                    bottom: -23px;
                }
            }
            .recipe-page--details {
                .recipe-page--star-separator {
                    width: 28%;
                }
            }
        }
    }

    @media screen and (min-width: 64rem) {
        .recipe-page--content {
            background-color: #fff;
            .recipe-page--header {
                position: relative;
                margin-top: 70px;
                .recipe-page--title {
                    /*position: absolute;
                    margin-top: -70px;*/
                    padding-left: 40px;
                    /*max-width: 800px;*/
                    text-align: left;
                    order: 1;
                }
                .recipe-page--image {
                    padding-right: 140px;
                    order: 2;
                    background-color: var(--lighter-blue);
                    margin-bottom: 0;
                    picture > img {
                        width: 100%;
                        height: 600px;
                        object-fit: cover;
                    }
                }
                .recipe-page--star-separator {
                    width: 20%;
                }
                .recipe-page--star-separator:not(.mobile-tablet-only) {
                    bottom: -26px;
                }
                .recipe-page--related-products-image {
                    position: absolute;
                    bottom: -4rem;
                    right: -4rem;
                    max-width: 50%;
                    z-index: 5;
                }
            }
            .recipe-page--details {
                display: flex;
                flex-direction: row;
                padding: 40px 40px 20px;
                gap: 45px;
                justify-content: space-between;
                background-color: var(--lighter-blue);
                .recipe-page--ingredients,
                .recipe-page--steps {
                    margin-top: 45px;
                    width: 45%;
                }

                .recipe-page--separator {
                    border: 0.125rem solid var(--blue);
                }
            }
        }
    }
    @media screen and (min-width: 90rem) {
        .recipe-page--content {
            .recipe-page--header {
                display: flex;
                flex-direction: column; 
                gap: 10px;
                position: relative;
                .recipe-page--image {
                    picture > img {
                        width: 100%;
                        height: 600px;
                        object-fit: cover;
                    }
                }
                .recipe-page--star-separator {
                    width: 20%;
                }
                .recipe-page--star-separator:not(.mobile-tablet-only) {
                    bottom: -35px;
                }
                .recipe-page--related-products-image {
                    /*bottom: calc(77% - 600px);*/
                    bottom: -5%;
                }
            }
            .recipe-page--details {
                gap: 65px;
                .recipe-page--ingredients,
                .recipe-page--steps {
                    margin-top: 65px;
                }
                .recipe-page--ingredients {
                    .recipe-page--ingredients-title {
                        font-size: 30px;
                    }
                }
                .recipe-page--steps {
                    .recipe-page--steps-title {
                        font-size: 30px;
                    }
                }
            }
        }
    }
}