/* ======================================== */
/* HERO */
/* ======================================== */

section.hero.hero-article .zones {
    --_space-top: 10.6875rem;
    padding-block-start: var(--_space-top);
    padding-block-end: 3.5625rem;
    max-inline-size: 71.375rem;
    margin-inline: auto;
    inline-size: 100%;
    display: grid;
    grid-template-columns: 5fr 5fr;
    grid-template-areas:
        "text img"
        "breadcrumb img";
    column-gap: 1.375rem;
}

section.hero.hero-article .zones .zone.zone-text {
    grid-area: text;
    padding-block: 3.5rem 7.875rem;
    position: relative;
}

section.hero.hero-article .zones .zone.zone-text::after {
    content: "";
    position: absolute;
    block-size: calc(100% + var(--_space-top));
    inline-size: 200vw;
    inset-inline-start: -100vw;
    background: var(--bg);
    inset-block-end: 0;
    z-index: -1;
}

section.hero.hero-article .zones .zone.zone-text hgroup {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.5rem;
}

section.hero.hero-article .zones .zone.zone-text .author {
    margin-block-start: 2.5rem;
}

section.hero.hero-article .zones .zone.zone-img {
    grid-area: img;
}

section.hero.hero-article .zones .zone.zone-img .img-wrapper {
    block-size: auto;
    aspect-ratio: 444/542;
    max-inline-size: 27.75rem;
    margin-inline-start: auto;
}

section.hero.hero-article .zones .zone.zone-breadcrumb {
    padding-block-start: 5rem;
    grid-area: breadcrumb;
}

section.hero.hero-article:where(:not(:has(.zone-img))) .zones {
    --_space-top: 12.5rem;
    padding-block-end: 3.75rem;
    grid-template-areas:
        "text text"
        "breadcrumb breadcrumb";
}

section.hero.hero-article:not(:has(.zone-img)) .zones .zone.zone-text {
    text-align: center;
    max-inline-size: 35.1875rem;
    margin-inline: auto;
    inline-size: 100%;
    padding-block-start: 0;
    padding-block-end: 5.75rem;
}

section.hero.hero-article:not(:has(.zone-img)) .zones .zone.zone-breadcrumb {
    text-align: center;
    padding-block-start: 4.375rem;
}

@media only screen and (max-width: 768px) {
	
	section.hero.hero-article .zones .zone.zone-text::after {
		inline-size: 100vw;
		inset-inline-start: calc(-1 * var(--container-x-padding));
}

	
    section.hero.hero-article .zones {
        padding-block: 0;
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "img"
            "breadcrumb";
    }

    section.hero.hero-article:not(:has(.zone-img)) .zones {
        padding-block-start: 11.6875rem;
    }

    section.hero.hero-article .zones .zone.zone-img {
        grid-column: -1/1;
        order: -1;
        margin-inline: calc(-1 * var(--container-x-padding));
    }
	
	section.hero.hero-article .zones .zone.zone-text {
		margin-block-start: var(--header-height);
	}

    section.hero.hero-article .zones .zone.zone-text hgroup {
        gap: 3.125rem;
    }

    section.hero.hero-article .zones .zone.zone-text .author {
        margin-block-start: 1.25rem;
    }

    section.hero.hero-article:not(:has(.zone-img)) .zones .zone.zone-text {
        text-align: start;
    }

    section.hero.hero-article .zones .zone.zone-text,
    section.hero.hero-article:not(:has(.zone-img)) .zones .zone.zone-text {
        padding-block-end: 3.75rem;
    }

    section.hero.hero-article .zones .zone.zone-breadcrumb,
    section.hero.hero-article:not(:has(.zone-img)) .zones .zone.zone-breadcrumb {
        padding-block-start: 3.125rem;
        text-align: start;
    }

}

/* ======================================== */
/* CONTENT */
/* ======================================== */

section.article-content > * {
    margin-block: 6.25rem;
}

section.article-content > .container-padded {
    margin-block-start: 3.125rem;
}

section.article-content .description {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 57.0625rem;
}

section.article-content .description blockquote {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 42.5rem;
}

section.article-content .scrollable-gallery .zones {
    display: grid;
    gap: 6.25rem;
}

section.article-content .scrollable-gallery .zones .zone-titles .title {
    max-inline-size: 57.0625rem;
    margin-inline: auto;
    inline-size: 100%;
    text-align: center;
}

section.article-content .scrollable-gallery .zones .zone-slider {
    inline-size: 0;
    min-inline-size: 100%;
}

section.article-content .scrollable-gallery .zones .zone-slider .infinite-loop > * {
    flex-basis: auto;
    block-size: 25rem;
}

section.article-content .scrollable-gallery .zones .zone-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    
    section.article-content > * {
        margin-block: 3.125rem;
    }

    section.article-content > .intro-text {
        margin-block-start: 6.25rem;
    }

    section.article-content .scrollable-gallery .zones {
        gap: 3.125rem;
    }

    section.article-content .scrollable-gallery .zones .zone.zone-titles .title {
        max-inline-size: none;
        text-align: start;
        margin-block-end: 3.125rem;
    }

    section.article-content .description blockquote {
        padding-inline: 1.25rem;
    }

    section.article-content .scrollable-gallery .zones .zone-cta {
        justify-content: start;
    }

    section.article-content .scrollable-gallery .zones .zone-slider .infinite-loop > * {
        block-size: 20.5rem;
    }

}

/* ======================================== */
/* RELATED */
/* ======================================== */

section.recipe-related .zones {
    max-inline-size: 86.25rem;
    margin-inline: auto;
    inline-size: 100%;
    padding-block: 6.25rem;
    display: grid;
    gap: 6.25rem;
}

section.recipe-related .zones .zone.zone-title {
    text-align: center;
}

section.recipe-related .zones .zone.zone-articles .articles-wrapper {
    display: grid;
    --grid-item-width: 17.5rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: 2.5rem 1.25rem;
    align-items: start;
}

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

    section.recipe-related .zones .zone.zone-cta {
        display: flex;
        justify-content: center;
    }

}

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

    section.recipe-related .zones {
        padding-block: 6.25rem;
        gap: 3.125rem;
    }

    section.recipe-related .zones .zone.zone-title {
        text-align: start;
    }
    
    section.recipe-related .zones .zone.zone-articles {
        margin-inline: calc(var(--container-x-padding) * -1);
        min-inline-size: 100%;
        inline-size: calc(100% + var(--container-x-padding) + var(--container-x-padding));
        overflow: auto;
        scrollbar-width: none;
    }

    section.recipe-related .zones .zone.zone-articles .articles-wrapper {
        padding-inline: var(--container-x-padding);
        display: flex;
        inline-size: max-content;
    }

    section.recipe-related .zones .zone.zone-articles .articles-wrapper > * {
        flex-shrink: 0;
        flex-basis: 80vw;
    }

}