#projects > h2 {
  color: var(--white);

  padding-top: 40px;
  padding-bottom: 20px;

  text-transform: uppercase;
}

.project-grid {
  width: 100%;
  max-width: var(--max-page-width);

  padding: auto;
  margin: auto;
  margin-bottom: 20px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project-grid a {
  background: var(--gray);

  border-color: var(--white);
  border-style: solid;
  border-width: 1px;

  width: 15.625em;
  height: 15.625em;
  margin: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.project-grid a:hover {
  border-color: var(--blue);
}

.project-grid a > img {
  max-width: 100%;
  height: 92%;
}

.project-grid a > div {
  background: var(--white);
  width: 100%;
  height: 8%;

  font-size: 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 720px) {
  #projects {
    font-size: 110%;
  }

}

@media (min-width: 1080px) {
  #projects {
    font-size: 120%;
  }
}