body {  
    margin: 0;  
    font-family: Arial, sans-serif;  
}  

.slider {  
    position: fixed;  
    bottom: 0;  
    left: 50%;  
    transform: translateX(-50%);  
    width: 100%;  
    max-width: 600px; /* Ancho máximo del slider */  
    height: 300px; /* Altura fija para el slider */  
    overflow: hidden;  
    border: 2px solid #ccc; /* Borde opcional */  
    background-color: #f9f9f9; /* Color de fondo opcional */  
    display: flex; /* Utiliza flexbox */  
    justify-content: center; /* Centra las imágenes horizontalmente */  
    align-items: center; /* Centra las imágenes verticalmente */  
}  

.slide {  
    display: none;  
    width: auto; /* Controla el ancho automático de la imagen */  
    height: auto; /* Controla la altura automática de la imagen */  
    max-width: 100%; /* No excede el ancho del contenedor */  
    max-height: 100%; /* No excede la altura del contenedor */  
}  

.slide.active {  
    display: block;  
}    display: block;