#purpose {
  grid-area: purp;
}

#clamming {
  grid-area: clam;
}

#projects {
  grid-area: proj;
}

@media screen and (max-width: 30em) {
  main {
    grid-template-areas: " bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr" " purp purp purp purp purp purp purp purp purp purp purp purp" " clam clam clam clam clam clam clam clam clam clam clam clam" " proj proj proj proj proj proj proj proj proj proj proj proj";
  }
}
@media screen and (min-width: 30em) {
  main {
    grid-template-areas: " bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr bnnr" " purp purp purp purp purp purp purp proj proj proj proj proj" " clam clam clam clam clam clam clam . . . . .";
  }
}