@charset "UTF-8";

body {
  background-color: #ffffff;
}

#container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  column-gap: 18px;
  row-gap: 6px;
  padding: 6px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #ffffff;
  border: 1px solid #666;
  box-sizing: border-box;
}

#container>* {
  font-family: Helvetica, sans-serif;
  font-size: 10px;
  line-height: 12px;
  color: #333;
}

strong, em {
  font-family: Helvetica, sans-serif;
}

strong {
  font-weight: bold;
}

.amount-head {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.dv-head {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

.amount-col {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

.dv-col {
  grid-column: 5 / 6;
  grid-row: 2 / 4;
}

.vertical-questions {
  grid-column: 7 / 8;
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  justify-self: end;
  font-style: italic;
}

.vertical-questions strong {
  font-weight: bold;
  font-style: italic;
}

.phone-number {
  font-weight: normal;
  font-style: italic;
}

.footnote {
  grid-column: 2 / 5;
  grid-row: 4 / 5;
}

.product {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}

.description {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
}

.ingredients-en {
  grid-column: 2 / 6;
  grid-row: 5 / 6;
}

.contains-en {
  grid-column: 2 / 6;
  grid-row: 6 / 7;
  align-self: start;
}

.import {
  grid-column: 6 / 7;
  grid-row: 5 / 6;
}

.ingredients-fr {
  grid-column: 2 / 6;
  grid-row: 7 / 8;
}

.website {
  grid-column: 6 / 7;
  grid-row: 7 / 8;
}

#info {
  font-family: Helvetica, sans-serif;
  font-size: 10px;
  line-height: 15px;
  color: #333;
  width: 800px;
  margin: 0 auto 100px auto;
}

.description,
.ingredients-en,
.ingredients-fr {
  line-height: 14px;
}

.amount-head strong,
.dv-head strong {
  font-weight: bold;
}

.product strong {
  font-weight: bold;
}

.product em {
  font-style: italic;
  font-weight: normal;
}

.ingredients-en strong,
.ingredients-fr strong {
  font-weight: bold;
}

.ingredients-en em,
.ingredients-fr em {
  font-style: italic;
}

.contains-en strong em {
  font-weight: bold;
  font-style: italic;
}

.contains-en > em {
  font-style: italic;
  font-weight: normal;
}

.import strong {
  font-weight: bold;
}

.website strong {
  font-weight: bold;
}

