.card-slider {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative; /* Needed for absolute positioning of slider-inner */
}

.slider-inner {
    display: flex;
    width: 100%; /* Ensure it only takes up 100% of the card-slider's width */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Smooth transition for JS sliding */
}

.slider-item {
    flex: 0 0 100%; /* Each item takes 100% of the visible space and does not shrink/grow */
    height: 100%;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}