.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-list li {
  flex: 0 0 calc(33.33% - 20px);
}

.image-list-image {
  width: 100%;

  display: grid;
  place-items: center;

  padding: 6em;
  box-sizing: border-box;

}

.image-list-image img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.image-list-name {
  margin-top: 2em;
}

.image-list-caption {
  text-align: center;
}

@media only screen and (max-width: 719px) {
  .image-list li {
    flex: 0 0 100%;
  }

  .image-list-image {
    padding: 4em;
  }
}

@media only screen and (min-width: 720px) and (max-width: 900px) {
  .image-list li {
    flex: 0 0 calc(50% - 20px);
  }
}

@media only screen and (min-width: 1920px) {
  .image-list-image {
    padding: 12em;
  }
}