.horizontal-cards {
    display: grid;
    overflow:hidden;
    grid-gap: 20px;
    grid-template-columns: repeat(4, calc(60%));
    grid-template-rows: minmax(150px, 1fr);
}
.horizontal-cards *{
    grid:2/-2;
    
}
:root{
    --card-mod:paused;
}
.card {
    position:relative;
    /*animation:6s card_scroll infinite;
    animation-play-state: var(--card-mod);
    animation-direction:var(--card-dir);*/
    width:100%;
    transition:500ms;
    background-color:whitesmoke;
    border-radius: 1%;
    left:0%;
}
#carousell{
    overflow:clip;
    display:grid;
    grid-template-columns:1fr 8fr 1fr;
    grid-template-rows:minmax(150px,1fr);
}
.cardsliderContainer {
    width:100%;
    height:100%;
    overflow:hidden;
}
.arrow{
    background-position: center;
    background-repeat: no-repeat;
    overflow:clip;
    background-image:url(../Decoration/arrow.svg);
    animation: 0.5s indicate infinite;
    animation-play-state: paused;
}
.rarrow{
    overflow:clip;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url(../Decoration/arrow.svg);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    animation: 0.5s indicater infinite;
    animation-play-state:paused;
}
@keyframes indicate {
    0%{
        transform:translateX(0%)
    }
    80% {
        transform:translateX(-50%)
    }
    100% {
        transform:translateX(0);
    }
    
}
@keyframes indicater {
    0%{
        transform:translateX(0%) scaleX(-1);
    }
    80% {
        transform:translateX(50%) scaleX(-1);
    }
    100% {
        transform:translateX(0) scaleX(-1);
    }
    
}

@keyframes card_scroll {
    0%{
        left:0;
    }
    25%{
        left:-100%;
    }
    50%{
        left:-200%;
    }
    75%{
        left:-300%;
    }
    100%{
        left:0;
    }
}