/* Contenedor de la imagen para asegurar que el zoom se controle */
.image-container {
  overflow: hidden; /* Oculta cualquier parte de la imagen que se salga del contenedor al hacer zoom */
  width: 300px; /* Ancho del contenedor */
  height: 200px; /* Alto del contenedor */
  position: relative; /* Necesario para posicionar elementos hijos si se requiere */
  margin: 20px; /* Espacio alrededor del contenedor */
}

/* Estilos de la imagen */
.zoom-image {
  display: block; /* Evita espacios en blanco bajo la imagen */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
  transition: transform 0.3s ease-in-out; /* Transición suave del efecto de zoom */
}

/* Efecto al pasar el mouse sobre la imagen */
.zoom-image:hover {
  transform: scale(2.2); /* Agranda la imagen al 120% de su tamaño original */
  cursor: pointer; /* Cambia el cursor a una mano, indicando que es interactiva */
}