.collage {
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.image-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
}

/* Clip each image diagonally */
.image-1 img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
}

.image-2 img {
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.image-3 img {
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
}

.collage-container {
  margin-left: -10%;
  margin-right: -10%;
}
/*  TODO: update hover animation when links for games */
/* .collage-container:hover {
  z-index: 10;
}

.collage-container:hover img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: scale(1.02);
  filter: brightness(0.9);
} */

@media (max-width: 768px) {
  /* TODO: update hover animation when links for games
   .collage-container:hover img {
    clip-path: none;
    transform: none;
    filter: brightness(0.6);
  } */

  
}