:root {
    /* Colors */
    --color-rose-800: #7A284E;
    --color-rose-50: #FFF7FB;

    --color-stone-900: #312E2C;
    --color-stone-600: #5F564D;
    --color-stone-150: #E3DDD7;
    --color-stone-100: #F3E5D7;

    --color-brown-800: #854632;
    --color-white: #fff;

    /* Spacings */
    --spacing-1600: 8rem;
    --spacing-600: 3rem;
    --spacing-500: 2.5rem;
    --spacing-400: 2rem;
    --spacing-300: 1.5rem;
    --spacing-200: 1rem;
    --spacing-150: .75rem;
    --spacing-100: .5rem;

    /* Fonts */
    --font-headers: "Young Serif", serif;
    --font-normal: "Outfit", serif;
}

/* Utilities */
.text-header {
    font-family: var(--font-headers);
    line-height: 100%;
    letter-spacing: 0;
}

.text-header-1 {
    color: var(--color-stone-900);
    font-size: 2.5rem;
}

.text-header-2 {
    font-size: 1.75rem;
    color: var(--color-brown-800);
}

.text-normal-1 {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-rose-800);
}

.text-normal-2 {
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
}

.text-normal-3 {
    font-weight: 700;
    line-height: 150%;
    font-size: 1rem;
}

.inline {
    display: inline;
}

.underline:not(:last-child) {
    padding-bottom: var(--spacing-400);
    border-bottom: 1px solid var(--color-stone-150);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

.color-brown {
    color: var(--color-brown-800);
}

/* Styling */
body {
    background-color: var(--color-stone-100);
    font-family: var(--font-normal);
    line-height: 100%;
    letter-spacing: 0;

    color: var(--color-stone-600);
}

.container {
    width: 100%;
    max-width: 46rem;
    margin: 6rem auto;

    border-radius: 1.5rem;

    background-color: var(--color-white);
}

.hero {
    margin-bottom: var(--spacing-500);
}

.hero__wrapper {
    padding: var(--spacing-500) var(--spacing-500) 0 var(--spacing-500);
}

.hero__img {
    object-fit: cover;
    height: 100%;
    max-height: 18.75rem;
    border-radius: .75rem;
}

.main-wrapper {
    padding: 0 var(--spacing-500) var(--spacing-500) var(--spacing-500);
}

.main__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.section {
    margin-block: var(--spacing-400);
}

.preparation {
    background-color: var(--color-rose-50);
    padding: var(--spacing-300);
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
}

.prepartaion__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
}

.prepartaion__list__item {
    padding-left: var(--spacing-200);
    position: relative;
}

.prepartaion__list__item::before {
    content: "• ";
    color: var(--color-brown-800);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
    font-weight: 700;
}

.ingredients {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.ingredients__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
}

.ingredients__list__item {
    padding-left: var(--spacing-200);
    position: relative;
}

.ingredients__list__item::before {
    content: "• ";
    position: absolute;
    color: var(--color-brown-800);
    font-weight: 700;
    left: 0;
}

.instructions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.instructions__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
}

.instructions__list__item {
    display: flex;
    gap: var(--spacing-200);
}

.instructions__list__item__number {
    display: inline-block;
    width: 100%;
    max-width: 1rem;
    overflow: hidden;
    font-weight: 700;
    color: var(--color-brown-800);
}

.nutrition {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
}

.nutrition__table {
    border-collapse:collapse;
    border-spacing: 1rem;
}

.nutrition__table__row__item {
    padding: var(--spacing-150) var(--spacing-400);
}

.nutrition__table__row:not(:last-child) {
    border-bottom: 1px solid var(--color-stone-150);
}
/* Responsive */
@media only screen and (max-width: 23.4375em) {
    .container {
        border-radius: 0;
        margin: 0 auto;
    }

    .hero__wrapper {
      padding: 0;
    }

    .hero__img {
        border-radius: 0;
    }

    .main-wrapper {
        padding: 0 var(--spacing-400) var(--spacing-500) var(--spacing-400);
    }
}