﻿.scroller-container {
    display: flex;
    gap: 20px;
}

.scroller {
    width: 150px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.scroll-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between images */
    animation: scrollUp 25s linear infinite;
}

.scroller:nth-child(even) .scroll-content {
    animation: scrollUp 25s linear infinite;
}

.scroll-content img {
    width: 100%;
    max-height: 70px;
    height: 70px;
    padding: 10px;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #ddd;
}

/* Keyframe animations */
@keyframes scrollUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
    /* Moves up only half to allow smooth transition */
}

@keyframes scrollDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}


@media only screen and (max-width: 600px) {
    .scroller-container {
        display: flex;
        gap: 10px;
    }

    .scroller {
        width: 115px !important;
        height: 210px !important;
        overflow: hidden;
        position: relative;
    }

    .scroll-content {
        width: 90% !important;
        display: flex;
        flex-direction: column;
        gap: 10px; /* Space between images */
        animation: scrollUp 25s linear infinite;
    }

    .scroller:nth-child(even) .scroll-content {
        animation: scrollUp 25s linear infinite;
    }

    .scroll-content img {
        width: 100% !important;
        max-height: 50px !important;
        height: 50px !important;
        padding: 6px !important;
        box-sizing: border-box;
        background-color: transparent;
        border: 1px solid #ddd;
    }

    /* Keyframe animations */
    @keyframes scrollUp {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-50%);
        }
        /* Moves up only half to allow smooth transition */
    }

    @keyframes scrollDown {
        from {
            transform: translateY(-50%);
        }

        to {
            transform: translateY(0);
        }
    }
}
