.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(100px, auto)); /* Adjust minmax as needed */
  gap: 20px;
  padding: 20px;
  max-height: 600px;
  margin: 0 auto;
  overflow: hidden;
}



.grid-item {
  position: relative;
  color: #fff; /* White text color for readability */
  overflow: hidden; /* Ensures nothing spills out of the grid item */
  will-change: transform;
}

/* Target odd indexed items which are in the left column and translate them up by 500px */
.grid-item:nth-child(odd) {
  //transform: translateY(-500px);
}

.grid-item:nth-child(odd):hover {
  /* Stops the animation on hover */
  animation-play-state: paused;
}

.grid-item:nth-child(even) {
  //transform: translateY(-20px);
}


.grid-item img {
  width: 100%;
  display: block; /* Remove any extra space below the image */
  transition: transform 0.3s ease; /* Smooth transition for any transformation */
}

.grid-item a {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff; /* White text color for the links */
  text-decoration: underline;
  display: flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}

.grid-item a img{
  width: 12px;
  margin-left: 5px;
}

/* Hover effect for the images to slightly zoom in */
.grid-item:hover img {
  transform: scale(1.05);
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* Full width columns on smaller screens */
  }
}


@media (max-width: 1024px) {
  .grid-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Ensure the container takes full width */
    width: 100%;
    /* Optional: Add some padding to ensure items don't stick to the edges */
    padding: 10px 0;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
  }
  .grid-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .grid-item {
    /* Set a fixed width or minimum width for the items to prevent them from shrinking too much */
    flex: 0 0 auto; /* Do not grow, do not shrink, auto basis */
    width: 210px; /* Example fixed width, adjust as needed */
    margin-right: 20px; /* Adjust based on your design */

    /* Ensure the images within grid-item also scale correctly */
    display: flex; /* Makes it a flex container */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
  }

  .grid-item img {
    width: 100%; /* Make images responsive within the confines of .grid-item */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure images do not overflow their container */
  }
}