* {
  /*   border: 1px dashed white; */
}

/* 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;
  grid-template-columns: 1fr 1fr;
  background: #fc4444;
}
.avenir {
  grid-column: 2;
  text-align: right;
  color: cyan;
}
.avenir1 {
  font-size: 72px; font-weight:700;
}
.avenir2 {
  font-size: 65px; font-weight:600;
}
.avenir3 {
  font-size: 58px;
}
.avenir4 {
  font-size: 50px;
}
.avenir5 {
  font-size: 42px;line-height:;
}
.avenir6 {
  font-size: 30px; line-height:.1;
}
.abc {
  grid-column: span 2 / 3;
  text-align: right;
  color: white;
  /*   grid-row: */
}
.abc1 {
  font-size: 30px; font-weight: 900;
}
.abc2 {
  font-size: 24px; font-weight:700;
}
.abc3 {
  font-size: 16px; font-weight:600;
}
.abc4 {
  font-size: 14px; font-weight:500;
}
.abc5 {
  font-size: 10px; font-weight:300;
}
.abc6 {
  font-size: 8px; font-weight:100;
}
.info {
  color: cyan;
}
.info1{font-size:16x; padding:100px 0px 0px 0px; width: 200px; line-height:.01;}
.info2{font-size:24px; padding:100px 0px 0px 0px; width: 400px; line-height:.01;}
.info3{font-size:30px; padding:80px 0px 0px 132px; width: 200px; line-height:.01;}
.info4{font-size:24px; padding:70px 0px 0px 220px; width: 20px; line-height:.01;}
.info5{font-size:16px;padding:60px 0px 0px 350px; width: 10px; line-height:.01;}

.body {background:cyan;
margin; color:white; font-weight:100;
  padding: 20px;
text-align:center;
font-size: 25px;
font-family:avenir;}
h{font-size:100px; line-height:1}
h2{font-size:100px; line-height:.1; line-spacing:10px;}
/* Additional Visual Styling — you can ignore this */

.grid-container div {
  font-family: Avenir, Heveltica, Arial, san-serif;
}