.carousel {
    margin: 0 auto;
    padding: 20px 0;
    overflow: hidden;
    display: flex;
    direction: ltr !important;
    width:100% !important;
}

.card {
    width: 100%;
    color: white;
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    padding: 5px;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    &:nth-child(1)

{
    
}

}

.carousel {
    /* ... */
    &:hover .carousel-group

{
    animation-play-state: paused;
}

}

.carousel-group {
    /* ... */
    will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
    animation: scrolling 40s linear infinite;
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.carousel {
    /* ... */
    > *

{
    flex: 0 0 100%;
}

}
.carousel-group {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.card img {
    width: 200px;
    border-radius: 24px !important;
    cursor:pointer;
}
@media (max-width:700px) {
    .card {
        width: 200px !important;
    }
}