footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas:
    "about about links legal";
  padding: .5rem .5rem;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--font-small);

}

footer .about {
  grid-area: about;
}

footer .links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

footer .legal {
  grid-area: legal;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

footer .links p,
footer .legal p {
  font-size: var(--font-x);
  font-weight: var(--font-weight);
}

footer .logo {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  font-weight: var(--font-weight);
}

footer .logo img {
  width: 20px;
}

footer .text {
  margin-right: 2rem;
  margin-left: 1rem;
  margin-top: .5rem;
}

footer .follow {
  font-size: var(--font-x);
  font-weight: var(--font-weight);
  margin-top: 1rem;
  margin-left: 1rem;
}

footer .social {
  margin-top: .5rem;
  display: flex;
  gap: .8rem;
}

footer .social a {
  width: 25px;
  height: fit-content;
}

@media screen and (max-width: 700px) {
  footer {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "about about"
      "links legal";
  }

  footer .links,
  footer .legal {
    margin-left: 1rem;
    margin-top: 1rem;
  }
}

.copyright p {
  text-align: center;
  font-size: var(--font-small);
}