@layer cssreset {
/* css reset */
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /* text-wrap: balance; */
}
}

@layer fonts {
/* fonts */

/* young-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/young-serif-v2-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* young-serif-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/young-serif-v2-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/outfit-v11-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/outfit-v11-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/outfit-v11-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
}

@layer variables{
 :root {
  /* colors */
 
  --color-rose-dark: hsl(332, 51%, 32%);
  --color-rose-light: hsl(330,100%,98%);
  --color-stone-dark: hsl(24,5%,18%);
  --color-stone-medium: hsl(30, 10%, 34%);
  --color-stone-mediumdark: hsl(30, 18%, 87%);
  --color-stone-light: hsl(30, 54%, 90%);
  --color-brown: hsl(14, 45%, 36%);
  --color-white: hsl(0, 0%, 100%);


  /* spacing */
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-128: 8rem;

}
}

@layer typography {
   .textpreset1 {
    font-family: 'Young Serif', serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 100%;
    letter-spacing: 0px;
   }

   .textpreset2 {
    font-family: 'Young Serif', serif;
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 100%;
    letter-spacing: 0px;
   }

   .textpreset3 {
    font-family: Outfit, serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 100%;
    letter-spacing: 0px;

   }

   .textpreset4 {
    font-family: Outfit, serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: 0px;
   }

   .textpreset5 {
    font-family: Outfit, serif;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0px;
   }


}


body {

  @media (width>=calc(700 / 16 * 1rem)) {
  background-color: var(--color-stone-light);
  }
}

.wrapper {
  background-color: var(--color-white);
  margin: auto auto;


  @media (width>=calc(700 / 16 * 1rem)){
    width: 616px;
    border-radius: 24px;
    padding: var(--space-40);
    margin-top: var(--space-128);
    padding: var(--space-40);
  }


}

.textwrapper {
   
  @media (width<calc(700 / 16 * 1rem)) {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
  }
}
@layer hero {

  .hero {

    .image {
     height: 171px;
     margin-block-end: var(--space-40);  

     @media (width>=calc(700 / 16 * 1rem)){
      border-radius: 24px;
      height: 300px;

     }

    }

    .title {
      margin-block-end: var(--space-24);

      @media (width < calc(700 / 16 *1rem)){
        font-size: 2.25rem;
      }

    }

    .description{
      color: var(--color-stone-medium);
      margin-block-end: var(--space-32);

    }
  }
}

@layer preparation {

  .preparation {
    background-color: var(--color-rose-light);
    border-radius: 12px;
    padding: var(--space-24);
    margin-block-end: var(--space-32);
    
    

  .title {
    color: var(--color-rose-dark);
    margin-block-end: var(--space-16);

    @media (width<calc(700 / 16 * 1rem)){
      font-size: 1.25em;
    }

  }

  .description {
    color: var(--color-stone-medium);
    padding: 0;

    li {
      padding-left: var(--space-16);
      margin-left: var(--space-24);
    }

    li::marker {
      color:var(--color-rose-dark);
    }
    
 

  }
}
}

@layer Ingredients {

  .ingredients {
    margin-block-end: var(--space-32);
   


    .title {
      color: var(--color-brown);
      margin-block-end: var(--space-24);

    }

    .description {
      color: var(--color-stone-medium);
      padding:0;
      padding-bottom: var(--space-32);
      border-bottom: 1px var(--color-stone-light) solid;

     li {
      margin-left: var(--space-24);
      padding-left: var(--space-16);
     }

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

    }
  }
}

@layer instructions {

  .instructions {
    margin-block-end: var(--space-32);

  .title {
    color: var(--color-brown);
    margin-block-end: var(--space-24);


  }

  .description {
    color: var(--color-stone-medium);
    padding: 0;
    padding-bottom: var(--space-32);
    border-bottom: 1px var(--color-stone-light) solid;
    

    li {
      margin-left: var(--space-24);
      padding-left: var(--space-16);
    }

    li::marker {

      color: var(--color-brown);
      font-weight: 700;
    }

  }
}
}

@layer nutrition {

  .nutrition {
  

    .title {
      color: var(--color-brown);
      margin-bottom: var(--space-24);

    }

    .description {
      color: var(--color-stone-medium);
      margin-bottom: var(--space-24);

    }

     .nutrition-table {
      display:grid;
      grid-template-columns: 1fr 1fr;
      row-gap: var(--space-12);
      
     }

     .gridborder {
      grid-column: span 2;
      border-bottom: 1px solid var(--color-stone-light);
     }
     .measure {
      color: var(--color-stone-medium);
      padding-left: var(--space-32);
     }

     .value {
      color: var(--color-brown);
      font-weight: 900;
     }
     
    

    
    }
  }

.attribution {

  margin-top: var(--space-128);
  text-align: center;

  a {
    text-decoration: none;
    color: var(--color-brown);

  }

  a:hover {
    border: 1px var(--color-stone-dark) solid;
  }
}