@charset "UTF-8";

@import url(https://use.typekit.net/zha4hwg.css);

/* Font Style Definitions - Neue Haas Grotesk Display */
:root {
  --font_15-ultra-thin: 100;
  --font_25-thin: 200;
  --font_45-light: 400;
  --font_55-regular: 500;
  --font_56-regular-italic: 500;
  --font_65-medium: 600;
  --font_66-medium-italic: 600;
  --font_75-bold: 700;
  --font_76-bold-italic: 700;
  --font_95-black: 900;
}

/* Ultra Thin - 15 */
._15-ultra-thin {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 100;
  font-style: normal;
}

/* Thin - 25 */
._25-thin {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 300  ;
  font-style: normal;
}

/* Light - 45 */
._45-light {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Roman/Regular - 55 */
._55-regular {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Roman Italic - 56 */
._56-italic {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: italic;
}

/* Medium - 65 */
._65-medium {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* Medium Italic - 66 */
._66-medium-italic {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-style: italic;
}

/* Bold - 75 */
._75-bold {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Bold Italic - 76 */
h2{
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 650;
  font-style: italic;
  line-height: 13.3px;
  
}

/* Black - 95 */
h1{
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* Grid Span Classes */
.span-2 {
  grid-column: span 2;
  letter-spacing: 0.05em;
}

.span-3 {
  grid-column: span 3;
}

.row-3 {
  grid-row: 3;
}

.row-3-col-9 {
  grid-row: 3;
  grid-column: 8 / 11;
  justify-content: flex-end;
text-align:right;
}

.row-2-col-5 {
  padding-top: 20px;
  grid-row: 2 / 4;
  grid-column: 5 / 8;
  transform: rotate(6deg);
  letter-spacing: 0.07em;
  word-spacing: clamp(0.05em, 0.06em, 0.09em);
  text-align: justify;
    -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;

  text-spacing-trim: space-first;
}

  body {
    background-color: #efefef;
    size: 12px;
  }

  #container {
  display: grid;
  box-sizing: border-box;
  padding: 17px 25px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.8fr 1.17fr 10fr;
  grid-gap: 16px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #fff;
}

#container>* {
  display: flex;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: #333;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
}

#container>#nutrition-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 13px 35px auto;
}

#container>#nutrition-info>#dv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  line-height: 18px;
}

#container>#nutrition-info>#dv>#right {
  text-align: right;
}

#info {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #555;
  width: 800px;
  margin: 0 auto 100px auto;
}