*,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body
{
    width:100vw;
    min-height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-stone-100, #F3E5D7);
    font-family: Outfit;
    padding: var(--spacing-1600, 128px) var(--spacing-600, 48px);
}
.card
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 49%;
    max-height:100%;
    border-radius: var(--spacing-300, 24px);
    background: var(--color-white, #FFF);
    padding:2.5rem;
    gap: var(--spacing-400, 32px);
}
.prep
{
    display: flex;
    padding: var(--spacing-300, 1rem);
    flex-direction: column;
    gap: var(--spacing-200, 0.25rem);
    align-self: stretch;
    border-radius: var(--spacing-150, 12px);
    background: var(--color-rose-50, #FFF7FB);
}
.ingredients
{
    display: flex;
    padding: var(--spacing-300, 1rem);
    flex-direction: column;
    align-self: stretch;
    border-radius: var(--spacing-150, 12px);
    background: white;    
}
h1
{
    color: var(--color-stone-900, #312E2C);

    /* Desktop/text-preset-1 */
    font-family: "Young Serif";
    font-size: var(--font-size-desktop-text-preset-1, 40px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 40px */
}
h2
{
    color: var(--color-rose-800, #7A284E);

    /* Desktop/text-preset-3 */
    font-family: Outfit;
    font-size: var(--font-size-desktop-text-preset-3, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 20px */
}
h3
{
    color: var(--color-rose-800, #7A284E);

    /* Desktop/text-preset-3 */
    font-family: Outfit;
    font-size: var(--font-size-desktop-text-preset-3, 20px);
    font-style: normal;
    font-weight: 600;
    margin: 0px;
    padding: 0px;

}
p
{
    color: var(--color-stone-600, #5F564D);

    /* Desktop/text-preset-4 */
    font-family: Outfit;
    font-size: var(--font-size-desktop-text-preset-4, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */    
}
.instructions
{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300, 24px);
}
ul
{
    color: var(--color-stone-600, #5F564D);

    /* Desktop/text-preset-4 */
    font-size: var(--font-size-desktop-text-preset-4, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-left: 1.5rem;

}
ol
{
    padding-left: 1.5rem;

}
ol li {
    padding: 0 0 0.7rem 1rem;
    line-height: 1.4rem;
}

li::marker {
    font-weight: bold;
}

img
{
    display: block;
    width: 100%;
}
.nutrition
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-300, 24px);
    align-self: stretch;
}
table
{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
table td
{
    text-indent: 2.3rem;
    border-bottom: 1px solid lightgray;
    padding: 0.8rem 0 1rem 0;
}
.col1
{
    color: var(--color-stone-600, #5F564D);

    /* Desktop/text-preset-4 */
    font-family: Outfit;
    font-size: var(--font-size-desktop-text-preset-4, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}
.col2
{
    color: var(--color-brown-800, #854632);

    /* Desktop/text-preset-4-bold */
    font-family: Outfit;
    font-size: var(--font-size-desktop-text-preset-4, 16px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}