.mobile-slider {
    display:none;
}
.slider-container {
    display:flex;
    flex-direction: column;
}
.slide {
    position:relative;
    width:495px;
    transition:0.4s ease-in-out;
    display:flex;
    justify-content:center;
}
.slider-container .slide .card {
    height: 420px;
}
.slider-block-container {
    display: flex;
    height:575px;
    overflow:hidden;
    flex-direction: row;
}
    
.dots {
    display:flex;
    justify-content:start;
    flex-direction:column;
    margin-right:1rem;
    margin-top:6rem;
}

.dot, .dot-mobile {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: #006ac3 solid 1px;
    display: inline-block;
    margin: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.dot.active {
    background-color: #006ac3;
}
.arrow {
    position: absolute;
    top: 65%;
    z-index: 2;
    border: none;
    outline: none;
    background: none;
    font-size: 3rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 0.3s;
}
.arrow-left {
    left: 0px;
}

.arrow-right {
    right: 0px;
}

.arrow:focus {
    outline: none;
    border: none;
} 
@media screen and (max-width: 992px) {
    .desktop-slider {
        display: none;
    }
    .mobile-slider {
        display:block;
    }
    .mobile-slider-container {
        display: flex;
        flex-direction: row;
        overflow:hidden;
        width:100%
    }
    .mobile-slider-container .slide-mobile .card {
        white-space:wrap;
    }
    .slide-mobile {
        flex: 0 0 auto;
        flex-grow:1;
        max-width: 95%;
        height:auto;
        position:relative;
        transition:0.5s ease-in-out;
        display: flex;
        justify-content: space-between;
    }
    .dots {
        display: flex;
        flex-direction:row;
        margin-top:0;
    }
    .dot-mobile.active {
        background-color: #006ac3;
    }
}
    
@media screen and (max-width: 767px) {
    .slide-mobile {
        width: 94%;
    }
}
    
@media screen and (max-width: 520px) {
    .slide-mobile {
        width: 93%;
    }
}
    
@media screen and (max-width: 430px) {
    .slide-mobile {
        width: 92%;
    }
}
    
@media screen and (max-width: 390px) {
    .slide-mobile {
        width: 90%;
    }
}
    
@media screen and (max-width: 320px) {
    .slide-mobile {
        width: 88%;
    }
}