.slider {
    position: relative;
    width: 100%;
    max-width: 800px; /* Ensures it doesn’t exceed a reasonable width */
    height: auto;
    aspect-ratio: 3 / 2; /* Maintains aspect ratio */
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    object-fit: cover;
}

.active {
    opacity: 1;
}

/* Make images inside the slides responsive */
.slide img {
    object-fit: cover;
}