:root {
  --rose-800: #7a284e;
  --rose-50: #fff7fb;
  --stone-900: #312e2c;
  --stone-600: #5f564d;
  --stone-150: #e3ddd7;
  --stone-100: #f3e5d7;
  --brown-800: #854632;
  --white: #fff;
  --spacing-1600: 8rem;
  --spacing-600: 3rem;
  --spacing-500: 2.5rem;
  --spacing-400: 2rem;
  --spacing-300: 1.5rem;
  --spacing-200: 1rem;
  --spacing-150: 0.75rem;
  --spacing-100: 0.5rem;
  --text-xxl: 2.5rem;
  --text-xxl-mobile: 2.25rem;
  --text-xl: 1.75rem;
  --text-mid: 1.25rem;
  --text-base: 1rem;
  --font-bold: 700;
  --font-semibold: 600;
  --font-regular: 400;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: var(--text-base);
  color: var(--stone-600);
  background: var(--stone-100);
  line-height: 1.5;
  letter-spacing: 0;
}

ul,
ol {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  margin-left: calc(var(--spacing-200) + 8px);
}

li > span {
  font-weight: var(--font-semibold);
}

li::marker {
  color: var(--brown-800);
  font-weight: var(--font-bold);
}

.recipe {
  margin: 0 auto;
  max-width: 46rem;
  background: var(--white);
  border-radius: 24px;
}

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

.recipe__title {
  font-size: var(--text-xxl-mobile);
}

.recipe__title,
.recipe__section-title,
.recipe__meta-title {
  line-height: 1;
}

.recipe__title,
.recipe__section-title {
  font-family: "Young Serif", serif;
  font-weight: var(--font-regular);
}

.recipe__section-title {
  font-size: var(--text-xl);
  color: var(--brown-800);
}

.recipe__section-item,
.recipe__meta-item {
  padding-left: calc(var(--spacing-300) - 8px);
}

.recipe__section-divider {
  border-top: 1px solid var(--stone-150);
}

.recipe-hero > img {
  width: 100%;
  height: auto;
}

.recipe-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  gap: var(--spacing-400);
  padding: var(--spacing-500) var(--spacing-400);
}

.recipe__title {
  font-size: var(--text-xxl-mobile);
  font-weight: var(--font-regular);
  color: var(--stone-900);
}

.recipe__meta {
  padding: var(--spacing-300);
  background: var(--rose-50);
  border-radius: 12px;
}

.recipe__meta-title {
  font-family: "Outfit", sans-serif;
  font-size: var(--text-mid);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-200);
  color: var(--rose-800);
}

.recipe__meta-list {
  color: var(--stone-600);
}

.recipe__nutrition-list {
  display: grid;
  width: 100%;
  grid-template-columns: var(--spacing-400) 1fr var(--spacing-150) 1fr var(
      --spacing-400
    );
}

.recipe__nutrition-row {
  display: contents;
}

.recipe__nutrition-key {
  grid-column-start: 2;
}

.recipe__nutrition-value {
  grid-column-start: 4;
  font-weight: var(--font-bold);
}

.recipe__nutrition-row-divider {
  border-top: 1px solid var(--stone-150);
  grid-column: span 5;
  margin: var(--spacing-150) 0;
}

@media only screen and (min-width: 768px) {
  .recipe {
    margin: var(--spacing-1600) auto;
    padding: var(--spacing-500);
    width: clamp(38.5rem, 17.857vw + 29.929rem, 46rem);
  }

  .recipe__title {
    font-size: var(--text-xxl);
  }

  .recipe-hero,
  .recipe-hero > img {
    border-radius: 12px;
  }

  .recipe__hero > img {
    height: 18.75rem;
  }

  .recipe-text-container {
    padding: var(--spacing-500) 0 0 0;
  }
}