.reviews-marquee {
    height: 550px;
    overflow: hidden;
    position: relative;
    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px; /* hoogte van de fade */
        pointer-events: none; /* laat muis events door */
        background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
        z-index: 10;
    }
    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px; /* hoogte van de fade */
        pointer-events: none;
        background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
        z-index: 10;
    }
    .row_marquee {
        display: flex;
        flex-wrap: nowrap;
    }
    .review_item {
        background: #fff;
        padding: 30px;
        border-radius: 10px;
        .review_comment {
            p {
                font-size: 1.6rem;
                line-height: 2.5rem;
            }
        }
    }
    &.marquee-up,
    &.marquee-down {
        .row_marquee {
            flex-direction: column;
        }
        .col_marquee {
            flex: 0 0 auto;
            padding-bottom: 2.35em;
        }
    }
    &.marquee-left,
    &.marquee-right {
        .row_marquee {
            flex-direction: row;
        }

        .col_marquee {
            flex: 0 0 auto;
            margin-right: 2rem;
        }
    }
    &.marquee-up {
        .row_marquee {
            animation-name: marqueeTop;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: calc(var(--marquee-speed, 10s));
        }
    }
    &.marquee-down {
        .row_marquee {
            position: relative;
            top: 100%;
            animation-name: marqueeBottom;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: calc(var(--marquee-speed, 10s));
        }
    }
    &.marquee-left {
        .row {
            animation: marqueeLeft 12s linear infinite;
        }
    }
    &.marquee-right {
        .row {
            animation: marqueeRight 12s linear infinite;
        }
    }
}



/* Keyframes voor horizontaal */
@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes marqueeRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/* Keyframes voor verticaal (je had al) */
@keyframes marqueeTop { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes marqueeBottom { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }