.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0px;
  grid-auto-flow: dense; /* Distribute items to fill empty spaces */
  /*grid-auto-columns: 1fr;*/ /* Make items evenly sized */
}

/*.grid-row {
  display: flex;
  justify-content: space-between;
}*/

.grid-item {
  /*flex: 1;*/
  padding: 0px;
  margin: 10px;
  border: 0px solid #ccc;
  text-align: center;
  transition: transform 2s, opacity 1s, box-shadow 1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.grid-item:hover {
  transform: rotateY(360deg) scale(1.5);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  /*opacity: 0.7;*/
}

.grid-item:not(:hover) {
  transform: none; /* No rotation when not hovering */
}

img {
  max-width: 100%;
  height: auto;
}


.front-image,
.back-image {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out; /* Add a transition for opacity */
  
}

.back-image {
  display: none; /* Initially hidden */
  opacity: 0; /* Initially transparent */
}

.grid-item:hover .back-image {
  display: block; /* Show the back image on hover */
  opacity: 1; /* Make it fully visible */
}