/* 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-template-columns: 1fr 1.5fr 300px 100px 1fr;
  grid-template-rows: 500px 50px 50px 500px;
 c
}


.one {
  grid-column: 1/span 1;
  grid-row: 1/ span 2;
  writing-mode: vertical-lr; 
  font-size: 300px;
  font-weight: bold; 
  background: white;
  color: #D7CCC8; 
 
  
}



.two 
{
  grid-column: 2/span 2;
  padding: 45px;
  padding-right: 200px;
  margin-top: 90px;
  font-size: 30px; 
  font-family: Avenir; 
  color: #BCAAA4;
  
}

.halfthree {
  grid-column: 4/span 1;
  font-size: 20px;
  margin-top: 50px;
  
  
}


.three {
  grid-column: 5/span 1;
  font-size: 20px;
  margin-top: 50px;
  line-spacing: 10px;
  max-width: 175px;
}


.four {
  grid-column: 2/span 3;
  font-color: black; 
  word-spacing: 6px;
  font-size: 40px;
  
}

.five {
  grid-column: 2/span 4; 
  background: #FFAB91; 
  font-size: 40px; 
  word-spacing: 2em;
  color: white;
  
}

.six {
  grid-column: 1 /span 1;
  grid-row: 3/span 2;
  writing-mode: vertical-lr;
  font-size: 300px;
  font-weight: bold;
  color: white;
  background: #FFAB91
}

.seven{
  grid-column: 2/span 1;
  background: #FFAB91
  
}
.eight{
    grid-column: 3/span 3; 
    background: #FFAB91; 
    padding-top: 60px;
    padding-right: 200px;
    font-size: 20px;
}









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

.grid-container div {
  font-family: Avenir;
  
}