.projects img {
  height: min(150px, 12vh);
  width: min(550px, 90%);

  object-fit: cover;
}

.grid {
  --gutter: 1rem;
}

.img-caption {
  text-align: center;
  padding-top: 0.5rem;
}

figure {
  text-align: center;
}

.img {
  padding-bottom: unset;
}

h1 {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 2rem;
}

@media screen and (min-width: 769px) {
  .projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .projects img {
    height: 200px;
    width: 200px;
  }

  ul {
    gutter: 1.5rem;
  }

  .column {
    grid-column: span 4 !important;
  }

  .img-caption {
    text-align: left;
    font-weight: 600;
  }
}

@media screen and (min-width: 1025px) {
  .projects img {
    height: 225px;
    width: 225px;
  }

  .projects {
    grid-column: span 3 !important;
  }
}