.waterfall-image-viewer {

    position: relative;
    height: 150vh;
    padding: 0;
    margin: 0;
}

@media (max-width: 700px) {
    .waterfall-image-viewer {
        height: 100vh;
    }
}


.image-waterfall {

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;
    height: 100%;
    /* Ensure it fills the viewport height */

    overflow: hidden;
    /* Prevent vertical scrolling */
    /* margin-block: var(--padding-huge); */
}


@media (max-width: 480px) {
    .image-waterfall {
        grid-template-columns: 1fr;
    }
}

.column {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.scroller {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    animation: scroll-up var(--speed) linear infinite;
    animation-delay: var(--delay);
}


.image-set {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    animation-name: scroll-up;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--speed);
    animation-delay: var(--delay);
}

.waterfall-image-viewer::before,
.waterfall-image-viewer::after {
    content: '';
    position: absolute;
    height: 4rem;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1;
}

.waterfall-image-viewer::before {
    top: 0;
    background: linear-gradient(to bottom, var(--clr-offwhite-light), transparent);
}

.waterfall-image-viewer::after {
    bottom: 0;
    background: linear-gradient(to top, var(--clr-offwhite-light), transparent);
}

@media (max-width: 480px) {

    .waterfall-image-viewer::after {
        bottom: 4rem;
    
    }
}


.waterfall-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }

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