.scroller-container {
    overflow: hidden;
    margin-bottom: 1rem; 
    -webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.scroller-inner {
    display: flex;
    gap: 1rem;
    width: max-content; 
}

.scroller-container:hover .scroller-inner {
    animation-play-state: paused;
}
.gallery-item-marquee {
    height: 250px; 
    width: auto;  
}

.gallery-item-marquee img {
    height: 100%;
    width: auto;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gallery-item-more-marquee {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 250px; 
    background-color: #f8f9fa;
    border-radius: 1rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.gallery-item-more-marquee:hover {
    background-color: #e9ecef;
}

.scroller-container[data-direction="left"] .scroller-inner {
    animation: scrollLeft 40s linear infinite;
}

.scroller-container[data-direction="right"] .scroller-inner {
    animation: scrollRight 40s linear infinite;
}

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

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