.carousel{
margin: 100px auto;
margin-top:10px;
width: 50%;
/*border: 5px solid red;*/
display: flex;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width: none;/*for firefox*/

}
.carousel::-webkit-scrollbar{
display:none;
}

.group{
display:flex;
align-items: top;
justify-content: center;
gap: 1em;
animation: spin 100s infinite linear;
padding-right: 1em;
  &:hover {
    /*animation-play-state: paused;*/
}

}

.card{
flex: 0 0 10em;
height: auto;
width: 4rem;
border: 1px solid black;
font-size: 3 rem;
border-radius: 2em;
text-align:center;
align-content: center;
padding: 0 10px;
margin: 0 10px;
color:white;
filter: brightness(110%) saturate(50%);
background-color:black!important;
 &:hover {
 filter: brightness(120%) saturate(80%);
}
}


.card img{
 &:hover {
 filter: brightness(100%) saturate(200%);
/*border: 1px solid rgba(0, 242, 255, 1);*/
 }
}

@keyframes spin {
from {translate:0;}
to {translate:-100%;}

}