@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i");

.grid-container {
  display: grid;
  width: 1fr;
  height: 1fr;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% 30% 30%;
}

.amp {
  font-family: Playfair Display;
  font-size: 340px;
  text-align: center;
  margin-right: -65px;
  margin-left: -89px;
  max-width: 980px;
}

.X {
  font-family: Playfair Display;
  font-size: 540px;
  color: Black;
  text-align: center;
}
.two {
  font-family: Playfair Display;
  font-size: 55px;
  grid-column: 1/ span 3;
  text-align: center;
}
.grid-container {
  display: grid;
  width: 1fr;
  height: 1fr;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% 30% 30% 30% 30%;
}

.oneb {
  font-family: Playfair Display;
  font-size: 20px;
  color: black;
  padding: 5px;
  border: 3px white solid;
  grid-column: 1;
  text-align: right;
}
.twob {
  font-family: Playfair Display;
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  color: black;
  padding: 5px;
  border: 3px white solid;
  grid-column: 1;
  text-align: right;
}
.threeb {
  font-family: Playfair Display;
  font-size: 17px;
  font-weight: 600;
  color: black;
  padding: 5px;
  border: 3px white solid;
  grid-column: 1;
  text-align: right;
}

.fiveb {
  font-family: Playfair Display;
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  color: black;
  padding: 5px;
  border: 3px white solid;
  grid-column: 1;
  text-align: right;
}

.sixb {
  font-family: Playfair Display;
  font-size: 17px;
  font-weight: 900;
  color: black;
  padding: 5px;
  border: 3px white solid;
  grid-column: 1;
  text-align: right;
}
.sevenb {
  font-family: Playfair Display;
  font-size: 17px;
  font-weight: 900;
  font-style: italic;
  color: black;
  padding: 5px;
  border: 3px white solid;
  grid-column: 1;
  text-align: right;
}

.regular {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 400;
  color: black;
  padding: 5px;
  border: 8px white solid;
  grid-column: 2/ span 3;
  grid-row: 1/ span 6;
}

.regulara {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 400;
  color: black;
}

.italic {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: black;
}

.bold {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 600;
  color: black;
}

.bolditalic {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  color: black;
}
.black {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 900;
  color: black;
}

.blackitalic {
  font-family: Playfair Display;
  font-size: 11px;
  font-weight: 900;
  font-style: italic;
  color: black;
}

.word {
  font-family: Playfair Display;
  font-size: 10px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 980px;
  margin: 0 auto;
  padding-right: 2.093333%;
}

.numbers {
  font-family: Playfair Display;
  font-size: 25px;
  padding: 10px;
  padding: 10px;
  background-color: #ffffff;
  color: #000000;
  margin-left: 2.093333%;
  width: 7.9%;
  float: left;
}

.grid-container2 {
  display: grid;
  width: 1fr;
  height: 1fr;
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 30% 30% 30%;
}

.number {
  font-family: Playfair Display;
  font-size: 200px;
  color: black;
  font-weight: 900;
}

.by {
  font-family: Playfair Display;
  font-size: 100px;
  font-weight: 900;
  color: black;
}
.body {
  font-family: Playfair Display;
  font-size: 8px;
  color: black;
  font-style: italic;
  font-weight: 600;
  grid-columms: 2/ span 2;
}

.quote {
  font-family: Playfair Display;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  text-align: center;
}
</div>