/* Contenedor del slider */
.slider-container {
  width: 100%; /* Ajusta el contenedor al 100% del ancho de su elemento padre */
  overflow: hidden; /* Oculta los elementos que se desbordan */
  position: relative;
}

/* Pista del slider que contiene los elementos */
.slider-track {
  display: flex; /* Hace que los elementos hijos se alineen en fila */
  transition: transform 0.5s ease-out; /* Animación suave */
  will-change: transform;
  width: 100%; /* Asegúrate de que la pista tenga el ancho adecuado */
}

/* Cada item del slider */
.slider-item {
  flex: 0 0 auto; /* Evita que los elementos se estiren */
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column; /* Disposición en columna */
  justify-content: center; /* Centra verticalmente los elementos */
  width: calc(100% / 5); /* Muestra 5 elementos a la vez en pantallas grandes */
}

/* Contenedor de la imagen */
.slider-item .image-container {
  height: 200px; /* Altura fija para la imagen */
  width: 100%; /* Ancho fijo del contenedor de la imagen */
  display: flex;
  align-items: center; /* Centra la imagen verticalmente */
  justify-content: center; /* Centra la imagen horizontalmente */
}

/* Imagen dentro del contenedor */
.slider-item img {
  max-height: 100%; /* Ajusta la altura máxima para mantener la proporción */
  width: auto; /* Mantiene la proporción de la imagen */
  display: block;
}

/* Contenedor del texto */
.slider-item .text-container {
  margin-top: 10px; /* Espacio entre la imagen y el texto */
  width: 100%; /* Ancho fijo del contenedor del texto */
}

/* Título dentro del contenedor de texto */
.slider-item h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .slider-item {
    width: 100%; /* Muestra solo 1 elemento a la vez en pantallas pequeñas */
  }

  .slider-item .image-container {
    height: 150px; /* Ajusta la altura para pantallas pequeñas si es necesario */
  }

  .slider-item h3 {
    font-size: 1em; /* Ajusta el tamaño de fuente para pantallas pequeñas si es necesario */
  }
}