#text-carousel {

    display: grid;
    gap: 32px;

    .heading {
        margin-bottom: 32px;
    }

    .carousel-container {
        content-visibility: auto;
        background-position: center;
        display: flex;
        background-size: cover;
        gap: 50px;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        transition: all 0.3s;

        .slide {
            display: inline-flex;
            align-items: center;
            gap: 50px;
            animation: calc(10s * var(--count)) scroll infinite linear;
            position: relative;
            z-index: 2;
        }

        .slide:first-child {
            margin-right: 30px;
        }


        &[data-direction="right"] {
            .slide {
                animation-direction: reverse;
            }       
        }
     
    }
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}