* {box-sizing: border-box;}
html {
  font-family: Avenir, Helvetica, sans-serif; 
  margin: 2em;
  font-size: 180%;
  line-height: 1.5;
}
body {
  margin: 2rem 1rem 4rem;
}
h1 {
  text-transform: capitalize;
}
.grid {
  display: grid;
  justify-items: center; 
  grid-template-columns: repeat(4, 2fr) 1fr 1fr;
  grid-template-areas: 
    ".  H  E   .   . . "
    ".  H  E   .   . . "
    ".  L  .   LH  . . "
    "WW .  .   .   O O "
    ".  OO LL  .   . . "
    "RR .  .   DD  . . ";
}
.grid::before {
  border: 7px solid #f05858;
  content:' ';
  grid-column: 2 / 6;
  grid-row: 2 / 5;
  width: 100%;
}
span:nth-child(1) {
  grid-area: H;
}
span:nth-child(2) {
  grid-area: E;
}
span:nth-child(3) {
  grid-area: L;
}
span:nth-child(4) {
  grid-area: LH;
}
span:nth-child(5) {
  grid-area: O;
}
span:nth-child(6) {
  grid-area: WW;
}
span:nth-child(7) {
  grid-area: OO;
}
span:nth-child(8) {
  grid-area: RR;
}
span:nth-child(9) {
  grid-area: LL;
}
span:nth-child(10) {
  grid-area: DD;
}