.multi-slider-block {
    background-color: #FBF9F9; 
}
.multi-slider {
    height:60vh; 
    position:relative;
    
}
.multi-slider .slide {
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-repeat:no-repeat;
    background-position:center
}


.multi-slider .arrow {
    position:absolute;
    z-index:1;
    top:50%;
    background-color:rgba(0,0,0, .4);
    padding:10px;
    color: #fff;
    margin-top:-1rem;
    font-size:2rem;
    cursor:pointer;
    opacity: 0.3;
    transition:.5s all;
} 

.multi-slider:hover .arrow {
    opacity:1
}
.multi-slider .arrow.left {
    left:10%;
}
.multi-slider .arrow.right {
    right:10%;
}
.multi-slider .slide-holder {
    position:relative;
    width:50%;
    transition:1s all;
    opacity:.4;
    cursor:pointer;
}

.multi-slider .slide-holder.slide-1{
    width:24%;
    
}
.multi-slider .slide-holder.slide-3 {
    width:24%;
    
}
.multi-slider .slide-holder.slide-2 {
    opacity:1
}

.multi-slider .slide-holder:hover {
    opacity:1
}

@media(min-width:320px) and (max-width:768px) {
    .multi-slider {
        height:50vw
    }
    .multi-slider .slide-holder {
        width:100%;
    }
    .multi-slider .arrow.left {
        left:0;
    }
    .multi-slider .arrow.right {
        right:0
    }
    .multi-slider .slide-3,
    .multi-slider .slide-1 {
        display:none;
    }
}

@media(min-width:320px) and (max-width:768px) {
    .multi-slider {
        height:80vw
    }
}