.carousel-s {
margin: 0 auto;
padding: 50px 0;
/*max-width: 1000px;*/
overflow: hidden;
display: flex;
/*&:hover .group {
    animation-play-state: paused;
}*/
}

.card-s {
width: 100%;
/*color: white;
border-radius: 24px;
box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
padding: 20px;*/
border: none !important;
font-size: xx-large;
justify-content: center;
align-items: center;
min-height: 200px;
> * {
    flex: 0 0 100%;
}
/*&:nth-child(1) {
    background: #7958ff;
}

&:nth-child(2) {
    background: #5d34f2;
}

&:nth-child(3) {
    background: #4300da;
}*/
}
.group-s {
display: flex;
gap: 50px;
/* Add padding to the right to create a gap between the last and first card. */
padding-right: 20px;
will-change: transform; /* We should be nice to the browser - let it know what we're going to animate. */
animation: scrolling 80s linear infinite;
}

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