@import 'reset.css';
@import 'variable.css';
@import 'typo.css';
@layer reset, typo;


body{
    min-width: 100%;
    min-height: 100vh;
    background-color: var(--Stone_100);
}
.container{
    padding: var(--space_500) var(--space_400);
    background-color: var(--White);
}
.divider {
    border-bottom: 1px solid var(--Stone_150);
    margin: var(--space_400) 0;
}
figure{
    width: 100%;
    height: 100%;
}
.picture{
    min-width: 100%;
    max-height: 300px;
}
.h1_title{
    text-wrap: auto;
    margin-bottom: var(--space_300);
    color: var(--Stone_900)
}
h2{
    color: var(--Brown_800);
    margin-bottom: var(--space_300);
}
.p_title{
    color: var(--Stone_600);
    text-align: left;
}
.s_preparation{
    background-color: var(--Rose_50);
    padding: var(--space_300);
    margin: var(--space_400) 0;
    border-radius: 12px;
}
.p_preparation{
    color: var(--Rose_800);
    margin-bottom: var(--space_200);
}
.p_nutrition {
    color: var(--Stone_600);
    margin-bottom: var(--space_300);
}
.ul_preparation{
    color: var(--Stone_600);
    margin-left: var(--space_100);
    padding-left: var(--space_100);
}
.ul_preparation > li::marker {
    color: var(--Rose_800);
}
.ul_preparation >li {
    padding-left: var(--space_200);
}

.ul_ingredients,
ol{
    padding-left: 20px;
    color: var(--Stone_600);
}
.ul_ingredients > li{
    padding-left: var(--space_200);
    color: var(--Stone_600);
}
.ul_ingredients > li::marker,
.ol_instructions > li::marker{
    color: var(--Brown_800);
}
.ol_instructions >li:nth-child(-n + 5),
.ul_preparation >li:nth-child( -n + 2),
.ul_ingredients > li:nth-child( -n + 4){
    margin-bottom: var(--space_100);
}
.ol_instructions > li::marker{
    font-weight: 700;
}
.ol_instructions > li{
    padding-left: var(--space_200);
    color: var(--Stone_600);
    margin-left: var(--space_100);
}
.bold{
    color: var(--Brown_800);
    min-width: 40%;    
    margin-right: var(--space_400);
}
.s_nutrition > article {
    color: var(--Stone_600);
}
.nutrition-table{
    display: flex;
    justify-content: space-between;
    margin: 0 var(--space_400);
    padding: var(--space_100) 0;
}
.n_divider {
    border-bottom: 1px solid var(--Stone_150);
}
@media(min-width: 768px){
    .container{
        padding: 0;
    }
    main{
        margin: var(--space_600);
        padding: var(--space_500) var(--space_400);
        background-color: var(--White);
        border-radius: var(--space_300);
    }
    .picture{
        max-width: 536px;
        height: 300px;
        border-radius: var(--space_150);
    }
    header{
        margin-bottom: var(--space_500);
    }
}
@media(min-width: 1024px){
    main{
        max-width: 736px;
        margin: var(--space_1600) auto;
    }
    .picture{
        max-width: 656px;
    }
    
}