.grid-item.show {
  opacity: 1; /* Hacemos visible */
  transform: translateY(0); /* Regresa a su posición original */
}

#instagram-section {
  padding: 20px;
  background-color: #f9f9f9; /* Fondo ligero */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsivo */
  gap: 15px; /* Espacio entre tarjetas */
}

/* Agrega esto a tu archivo CSS */
.grid-item {
  opacity: 0; /* Inicialmente oculto */
  transform: translateY(20px); /* Desplazado hacia abajo */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Transiciones para la animación */
}


.grid-item:hover {
  transform: scale(1.05); /* Efecto de zoom al pasar el mouse */
}

.grid-item img {
  width: 100%; /* Asegura que la imagen llene el ancho de la tarjeta */
  height: auto; /* Mantiene la proporción de la imagen */
  border-bottom: 3px solid #ccc; /* Línea decorativa debajo de la imagen */
}

.grid-item .caption {
  padding: 10px; /* Espaciado para el texto */
  font-size: 14px; /* Tamaño del texto */
  color: #333; /* Color del texto */
}


.grid-item video {
  width: 100%;
  height: auto;
  max-height: 400px; /* Ajusta según lo necesites */
  object-fit: cover;
}



.grid-item .caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}