.slider{
    position: relative;
    width: 100%;
    height: 30svh;
    overflow: hidden;
}

.slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s;
}

.slide.active{
    opacity: 1;
}

.slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width:800px){

    .slider{
        height: 70vh;
        background: linear-gradient(rgb(126, 126, 126), rgb(77, 77, 77), rgb(49, 49, 49));
    }

    .slide img{
        object-fit: contain;
    }
}