/* Turn the grid container into a grid with three flexible columns.
Style the individual items to recreate the screenshots on class website.*/

.grid-container {
  display: grid;
  grid-gap: 15px;
}

.one {
  grid-coulmn-start:1;
  grid-column-end:1;
  grid-row-start:1;
  grid-row-end:10;
  transform: rotate(90deg);
  font-family: Comic sans ms;
  font-size:50%;
}

.two {
  grid-coulmn-start:4;
  grid-column-end:span 7;
  grid-row-start:1;
  grid-row-end:span 14;
  text-align:center;
  font-family: Comic sans ms;

}

.three {
  grid-coulmn-start:2;
  grid-column-end:span 8;
  grid-row-start:8;
  grid-row-end:span 14;
  font-family: Comic sans ms;

}

.four {
  grid-coulmn-start:4;
  grid-column-end:6;
  grid-row-start:20;
  grid-row-end:span 14;
  text-align:center;
  font-family: Comic sans ms;
}

.five {
  grid-coulmn-start:10;
  grid-column-end:span 7;
  grid-row-start:25;
  grid-row-end:span 4;
  font-family: Comic sans ms;
}

.six {
  grid-coulmn-start:20;
  grid-column-end:span 12;
  grid-row-start:29;
  grid-row-end:span 5;
  font-family: Berlin, sans-serif;
}




/* Additional Visual Styling — you can ignore this */

.grid-container div {
  color: ;

  font-weight: bold;
  font-size: 1.5rem;
  padding: 1em;
  background: ;
}