.badge-grid {
  display: grid;
  gap: var(--sizing-md);
  grid-template-columns: repeat(3,minmax(0,1fr));

  &  > * {
    display: flex;
    justify-content: center;
  }

  img {
    image-rendering: pixelated;
  }
}

@media screen and (min-width: 768px) {
  .badge-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}