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

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

        @keyframes marqueeRight {
            0% {
                transform: translateX(-50%);
            }

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

        .marquee-wrapper {
            display: flex;
            width: 200%;
        }

        .marquee-left {
            animation: marqueeLeft 20s linear infinite;
        }

        .marquee-right {
            animation: marqueeRight 20s linear infinite;
        }

        .marquee-wrapper:hover {
            animation-play-state: paused;
        }

        .marquee-content {
            display: flex;
            width: 100%;
            gap: 1.25rem;
            justify-content: flex-start;
        }

        .card {
            flex-shrink: 0;
            width: 300px;
            height: 180px;
        }

        @media (min-width: 641px) {
            .marquee-content {
                gap: 2rem;
            }

            .card {
                width: 380px;
                height: 180px;
            }
        }

        @media (max-width: 640px) {

            .marquee-left,
            .marquee-right {
                animation-duration: 10s;
            }

            .marquee-content p {
                font-size: 0.9rem;
                margin: 7px 3px;
            }

            .card {
                width: 250px;
                height: 160px;
            }

            .card .avatar {
                height: 30px;
                width: 30px;
                font-size: 0.9rem;
            }

            .card svg {
                width: 10px;
                height: 10px;
            }
        }