:root {
  /* Colors: */
  --white: #fff;
  --black: #000;
  --rose-800: #7a284e;
  --rose-50: #fff7fb;
  --stone-900: #312e2c;
  --stone-600: #5f564d;
  --stone-150: #e3ddd7;
  --stone-100: #f3e5d7;
  --brown-800: #854632;

  /* Font Family */
  --ff-base: "Outfit", sans-serif;
  --ff-heading: "Young Serif", serif;

  /* Font Size: */
  --fs-small: 0.75rem; /* 12px */
  --fs-base: 1rem; /* 16px */
  --fs-h1: 2.5rem; /* 40px */
  --fs-h2: 1.75rem; /* 28px */
  --fs-h3: 1.25rem; /* 20px */

  /* Font Weight: */
  --fw-base: 400;
  --fw-semi-bold: 600;
  --fw-bold: 700;

  /* Line Height: */
  --lh-base: 1.5;
  --lh-heading: 1;

  /* Letter Spacing: */
  --ls-base: 0;

  /* Spacing: */
  --sp-128px: 8rem;
  --sp-48px: 3rem;
  --sp-40px: 2.5rem;
  --sp-32px: 2rem;
  --sp-24px: 1.5rem;
  --sp-20px: 1.25rem;
  --sp-16px: 1rem;
  --sp-12px: 0.75rem;
  --sp-10px: 0.625rem;
  --sp-8px: 0.5rem;
}

/* 
********************************
SELF-HOSTING FONT:
********************************
*/
/* STATIC FONT: */
@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/YoungSerif-Regular.woff2") format("woff2"),
    url("/assets/fonts/YoungSerif-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* VARIABLE FONT: */
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-VariableFont_wght.woff2")
    format("woff2 supports variations");
  src: url("/assets/fonts/Outfit-VariableFont_wght.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 
********************************
GLOBAL CSS VALUES:
********************************
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}

body {
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-base);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);

  background-color: var(--stone-100);
  color: var(--brown-800);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 
********************************
MAIN:
********************************
*/
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--sp-128px);
}

/*
****** 
CARD
****** 
*/
.card {
  background-color: var(--white);
  max-width: 46rem;
  min-width: 38.5rem;
  border-radius: var(--sp-24px);
}

.card__image {
  max-width: 100%;
  margin-bottom: var(--sp-40px);
  border-radius: var(--sp-12px);
  padding: var(--sp-40px) var(--sp-40px) 0 var(--sp-40px);
}

.card__body {
  padding: 0 var(--sp-40px) 0 var(--sp-40px);
}

.card__line-decor {
  height: 1px;
  background-color: var(--stone-150);
}

/*
****** 
MULTIPLE TITLES
****** 
*/
.card__title,
.card__section-title {
  font-family: var(--ff-heading);
  line-height: var(--lh-heading);
  font-weight: var(--fw-base);
}

.card__section-title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-24px);
}

/*
****** 
ALL LISTS
****** 
*/
.card__list {
  padding-inline-start: var(--sp-20px);
}

.card__list-item,
.card__list-item-prep {
  padding-left: var(--sp-20px);
  margin-bottom: var(--sp-8px);
  color: var(--stone-600);
}

.card__list-item:last-child,
.card__list-item-prep:last-child {
  margin-bottom: 0;
}

.card__list-item::marker {
  font-weight: var(--fw-bold);
  color: var(--brown-800);
}

/* List in prep section only */
.card__list-item-prep::marker {
  color: var(--rose-800);
}

/*
****** 
CARD TITLE
****** 
*/
.card__title {
  font-size: var(--fs-h1);
  color: var(--stone-900);
  margin-bottom: var(--sp-24px);
}

/* Main Description plus in Nutrition Section */
.card__description {
  color: var(--stone-600);
}

/*
****** 
SECTION: PREPARATION TIME
****** 
*/
.card__prep-section,
.card__section {
  margin: var(--sp-32px) 0;
}

.card__prep-section {
  background-color: var(--rose-50);
  padding: var(--sp-24px);
  border-radius: var(--sp-12px);
}

.card__prep-title {
  color: var(--rose-800);
  margin-bottom: var(--sp-16px);
  font-size: var(--fs-h3);
}

/*
****** 
SECTION: NUTRITION
****** 
*/
.card__table {
  margin-top: var(--sp-24px);
  width: 100%;
}

.card__table-row {
  display: block;
  border-bottom: 1px solid var(--stone-150);
  padding: var(--sp-12px) 0 var(--sp-12px) 0;
}

.card__table-row:first-child {
  padding-top: 0;
}

.card__table-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.card__table-key {
  width: 20.5rem; /* 328px */

  text-align: left;
  padding-left: var(--sp-32px);
  font-weight: inherit;
}
.card__table-value {
  text-indent: var(--sp-8px);
  font-weight: var(--fw-bold);
}

/* 
********************************
FOOTER:
********************************
*/
.attribution {
  text-align: center;
  font-size: var(--fs-small);
  margin-bottom: var(--sp-24px);
}

/* LINKS */
/* Default State | Visited State */
.attribution a:link,
.attribution a:visited {
  color: #be123c;
  text-decoration: none;
}

/* State On Hover */
.attribution a:hover {
  color: #e11d48;
}

/* State Whilst Being Clicked */
.attribution a:active {
  color: #f43f5e;
}