.grid-container {
  display: grid;
  gap: 50px;
  align-items: center;
  justify-items: center;
}

.cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid-item {
  outline: none;
}

.grid-item__content {
  width: 100%;
  object-fit: contain;
  display: block;
  height: auto;
  max-height: 75vh;
  user-select: none;
  will-change: transform;
  backface-visibility: hidden;
}