/* 3-Column Grid Setup */
.image-grid {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Base Animation State */
.grid-item {
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
  will-change: transform, opacity;
}

/* Initial Offsets */
.slide-left-in {
  transform: translateX(-100px); /* Starts further left */
}

.slide-right-in {
  transform: translateX(100px); /* Starts further right */
}

.slide-up-in {
  transform: translateY(100px); /* Starts further down */
}

/* Active State triggered by JS */
.grid-item.visible {
  opacity: 1;
  transform: translate(0, 0);
}