.carousel {
    margin: 0 auto;
    padding: 20px 0;
    max-width: 90%;
    overflow: hidden;
    display: flex;
}

.card {
    /* max-width: 180px; */
    min-width: 180px;
    width: 100%;
    color: white;
    /* border: none; */
    /* border-radius: 24px; */
    /* box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0; */
    padding: 25px;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
    height: 180px;

    /* &:nth-child(1) {
        background: #7958ff;
    }

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

    &:nth-child(3) {
        background: #4300da;
    } */
}

.carousel {

    /* ... */
    >* {
        flex: 0 0 100%;
    }
}

/* Group the cards for better structure. */
.group {
    display: flex;
    gap: 20px;
    /* Add padding to the right to create a gap between the last and first card. */
    padding-right: 20px;
}

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

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

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

.carousel {

    /* ... */
    &:hover .group {
        animation-play-state: paused;
    }
}