:root {
  --rose-800:#7A284E;
  --rose-50: #FFF7FB;
  --stone-900: #312E2C;
  --stone-600: #5F564D;
  --stone-150: #E3DDD7;
  --stone-100: #F3E5D7;
  --brown-800: #854632;
  --white: #FFFFFF;

  --text-1-family-style: 'Young Serif';
  --text-1-font-size: 40px;
  --text-1-line-height: 100%;
  --text-1-letter-spacing: 0px;
  --text-1-font-weight: 400;
  
  --text-2-family-style: 'Young Serif';
  --text-2-font-size: 28px;
  --text-2-line-height: 100%;
  --text-2-letter-spacing: 0px;
  --text-2-font-weight: 400;

  --text-3-family-style: 'Outfit';
  --text-3-font-size: 20px;
  --text-3-line-height: 100%;
  --text-3-letter-spacing: 0px;
  --text-3-font-weight: 600;

  --text-4-family-style: 'Outfit';
  --text-4-font-size: 16px;
  --text-4-line-height: 150%;
  --text-4-letter-spacing: 0px;
  --text-4-font-weight: 400;

  --text-5-family-style: 'Outfit';
  --text-5-font-size: 16px;
  --text-5-line-height: 150%;
  --text-5-letter-spacing: 0px;
  --text-5-font-weight: 700;

  --spacing-1600: 128px;
  --spacing-600: 48px;
  --spacing-500: 40px;
  --spacing-400: 32px;
  --spacing-300: 24px;
  --spacing-200: 16px;
  --spacing-150: 12px;
  --spacing-100: 8px;
}

@media (max-width:1440px) {
  .card-container {
    width:736px;
  }
}

@media (max-width:768px) {
  .card-container {
  width:616px;}
}

@media (max-width:375px) {
  .card-container {
  width:100%;}
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--stone-100);
  display: flex;
  justify-content: center;
  min-height: 100vh;

}

.card-container {
  background-color: var(--white);
  max-width: 736px;
  display: flex;
  padding: 40px;
  width:100%;
  gap:40px;
  flex-direction: column;
  border-radius:14px;
}

.image-container {
  width:100%;  
  display:block;
  border-radius: 12px;
}

.receipt-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}


.title {
  margin: 0;
  font: var(--text-1-font-weight) 
  var(--text-1-font-size)
  /var(--text-1-line-height) 
  var(--text-1-family-style);
}

.header-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.description {
  font-family: var(--text-4-family-style);
  margin: 0;
}

h1, h2, h3, h4, h5 {
  margin: 0;
}

h2 {
  font:var(--text-3-font-weight) var(--text-3-font-size)/var(--text-3-line-height) var(--text-3-family-style);
  color: var(--rose-800);
}

.preparation-time {
  background-color: var(--rose-50);
  border-radius: 12px;
  padding: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.preparation-time li {
  padding-left: 8px;
}

.preparation-time ul {
  gap: 8px;
}

.preparation-time li::marker{
  color: var(--brown-800);
  margin-right: 16px;
}



ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style-position: outside;
}

li {
  padding-left: 0px;
  font-family: var(--text-4-family-style);
  font-size: var(--text-4-font-size);
  line-height: var(--text-4-line-height);
  font-weight: var(--text-4-font-weight);
  color: var(--stone-600);
}

.bold {
  font-weight: 600;

 }

.ingridients {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.preparation-time ul{
 padding-left: 24px;
}

.ingridients ul {
  padding-left: 24px;
}

.ingridients li {
  padding-left: 16px;
}

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

h2 {
  font: var(--text-2-font-weight) var(--text-2-font-size)/var(--text-2-line-height) var(--text-2-family-style)
}


.instructions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 32px 0px;
}

.instructions ul {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 24px;
}

.instructions li{
  padding-left: 24px;
}

.instructions li::marker {
  font: var(--text-5-font-weight) var(--text-5-font-size)/var(--text-5-line-height) var(--text-5-family-style);
  color: var(--brown-800);
}


.nutrition {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nutrition p {
  margin: 0;
  color: var(--stone-600);
  font: var(--text-4-font-weight) var(--text-4-font-size)/var(--text-4-line-height) var(--text-4-family-style);
}

.nutrition-chart {
  display:grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 24px;

}

.nutrition-chart span {
  border-bottom: 1px solid var(--stone-150);
}

/* убираем бордер у последней пары */
.nutrition-chart span:nth-last-child(-n+2) {
  border-bottom: none;
}

.nutrition-title {
  color: var(--stone-600);
  font: var(--text-4-font-weight) var(--text-4-font-size)/
  var(--text-4-line-height) var(--text-4-family-style);
  padding-left: 32px;
}

.nutrition-value {
  color: var(--brown-800);
  font: var(--text-5-font-weight) var(--text-5-font-size)/
  var(--text-5-line-height) var(--text-5-family-style);
}