*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: black;
}
.container{
    display: flex;
    width: 100vw;
    
}
.image-1{
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0), 
 90%,rgba(5, 5, 5, 0.986)),url('./img/ferrari.jpg');
}
.image-2{
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0), 
90%,rgba(5, 5, 5, 0.986)), url('./img/lambo.jpg');
}
.image-3{
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0), 
90%,rgba(5, 5, 5, 0.986)), url('./img/nissangtr.jpg');
}
.image-4{
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0), 
70%,rgba(5, 5, 5, 0.986)), url('./img/mustang.jpg');
}
.image-5{
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0), 
70%,rgba(5, 5, 5, 0.986)), url('./img/bmw.jfif');
}
.slide{
    background: ( to up, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    position: relative;
    height: 80vh;
    border-radius: 50px;
    flex:0.5;
    margin:10px;
    cursor: pointer;
    transition: all 700ms ease-in;
}
.slide h3{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2.5rem;
    position: absolute;
    bottom: 20px;
    left: 50px;
    opacity: 0;
    margin: 0;
}
.slide.active h3{
    opacity: 1;
    transition: opacity 0.55 ease-in
}
.bg-image{
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale();
    &:hover{
    filter:grayscale(0)  ;
    transform: scale(1.02);
    z-index: 9999;
    }
}
.slide.active{
    flex:5;
    filter:grayscale(0)
}