body {
  height: 100vh;
}

h1 {
  display: flex;
  justify-content: center;
  font: 700 2rem "Cantarell";
  color: hsl(0, 0%, 30%);
}

h2 {
  display: flex;
  justify-content: center;
  font: 700 2.5rem "Cantarell";
  color: hsl(0, 0%, 30%);
}

article {
  height: 20vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "blog social about";
}

article * {
  display: flex;
  justify-content: center;
  align-items: center;
}

a *:not(img) {
  box-shadow: inset 0 -0.3em hsl(163, 100%, 24%);
}
a:hover *:not(img) {
  box-shadow: inset 0 -0.3em hsl(163, 99%, 35%);
}
a:active *:not(img) {
  box-shadow: inset 0 -0.3em hsl(0, 100%, 60%);
}

@media (max-width: 850px) {
  h1 {
    font: 700 0.8rem "Cantarell";
  }
  h2 {
    font: 700 1.2rem "Cantarell";
  }
  article {
    height: 50vh;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "blog" "social" "about";
  }
}