body {
    background-color: #0D0F15;
    color: #A4A6B3;
    overflow-x: hidden; 
}

.has-background-grid {
    position: relative;
    overflow: hidden;
    perspective: 800px;
}

.has-background-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vh;
    z-index: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
    transform-origin: center;
    transform: translateX(-50%) translateY(-50%) rotateX(55deg);
}

.scroller {
    max-width: 100%; 
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
    display: flex;
    flex-wrap: nowrap; 
    gap: 4rem; 
    padding-block: 1rem;
    justify-content: center;
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content; 
    animation: scroll 40s linear infinite;
}

.scroller:hover .scroller__inner {
    animation-play-state: paused;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 2rem));
    }
}