.main_graphs {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

.secondary_graphs {
  display: grid;
  grid-template-columns: auto auto;
  background-color: rgba(128, 128, 128, 0.1);
}

.grid-header {
   grid-column: 1 / span 2;	
   grid-row: 1;
   text-align: center;
}

.grid-header > table {
   width: 50%
}

.td_red {
   color : red;
}

.td_green {
   color : green;
}

.grid-left {
   grid-column: 1;	
   grid-row: 2;
   /*center the image*/
   margin-left: auto;
   margin-right: auto;
}

.grid-left > img {
  width: 100%;
}

.grid-right {
   grid-column: 2;	
   grid-row: 2;
   /*center the image*/
   margin-left: auto;
   margin-right: auto;
}

.grid-right > img {
  width: 100%;
}