.slider {
    margin-top: 100px;
    width: 100%;
    height: 75vh;  /* You can change to any size: 60vh, 100vh, 500px */
    position: relative;
    overflow: hidden;
    background: #000;
}

/* Slides container */
.slides {
    display: flex;
    transition: 0.5s ease-in-out;
    height: 100%;
}

/* Each slide */
.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
}

/* Make image/video cover full slider */
.slide img,
.slide video {
    width: 100%;
    height: 100%;         /* FIXED (change from 900%) */
    object-fit: cover;    /* Makes it fill the slider properly */
}

/* Caption style */
.caption {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.35);
    padding: 15px 25px;
    border-radius: 10px;
    z-index: 10;
}

/* Mobile responsive */
@media(max-width: 768px) {
    .slider {
        height: 40vh;   /* Adjust for phones */
    }
}
