@charset "UTF-8";

body {
  background-color: #efefef;
  font-family: Georgia, serif; 
  font-size: 8pt; 
}

.container {
  display: grid;
  box-sizing: border-box;
  padding: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 10px; 
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: rgb(255, 255, 255)
}


.container > * {
  display: flex;
  font-family: Georgia, serif; 
  font-size: 8pt; 
  line-height: 12px;
  color: #333;
  flex-direction: column;
  background-color: #ff0;
}

strong {
  font-weight: 700;
  display: contents;
}

h1{
font-weight: 400;
display:contents;

}

.a {

  grid-column: 1 / 3;
  grid-row: 1 / 1;
  background-color: rgb(255, 255, 255) !important;
}



.b {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
  background-color: rgb(255, 255, 255);
}



.c {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  background-color: rgb(255, 255, 255);
}



.c > * {
  display: flex;
  justify-content: space-between; 
  width: 100%; 
}




.d {
  grid-column: 3 / 5;
  grid-row: 3 / 4;
  background-color: rgb(255, 255, 255);
}


.aa {

  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: rgb(251, 236, 188)

}

.aaa {

  grid-column: 2/ 3;
  grid-row: 1 / 2;
  background-color: rgb(251, 236, 188)

}

.bb {

  grid-column: 3 / 5;
  grid-row: 1 / 2;
  background-color: rgb(251, 236, 188)
}

.cc {

  grid-column: 1 / 5;
  grid-row: 2 / 3;
  background-color: rgb(251, 236, 188)

}

.dd {

  grid-column: 1 / 5;
  grid-row: 3 / 4;
  background-color: rgb(251, 236, 188)
}



#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: Georgia, serif; 
  font-size: 8pt; 
  line-height: 12px;
  color: #555;
  width: 800px;
  margin: 0 auto 100px auto;
}