:root{
    --arta-hover-scale:1.03;
}

.arta-portfolio-rail{
    display:flex;
    gap:24px;
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;

    transform:
        perspective(var(--arta-perspective))
        rotateX(var(--arta-rotate-x))
        rotateY(var(--arta-rotate-y));

    transform-style:preserve-3d;
}

.arta-rail-column{
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    position:relative;
}

.arta-rail-column.is-hidden{
    display:none;
}

.arta-rail-track{
    display:flex;
    flex-direction:column;
    gap:24px;
    will-change:transform;
}

.arta-rail-item{
    width:100%;
    flex-shrink:0;
}

.arta-rail-item a{
    display:block;
    text-decoration:none;
}

.arta-rail-item img{
    display:block;
    width:100%;
    height:auto;

    border-radius:24px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.arta-rail-item:hover img{
    transform:
        translateY(-4px)
        scale(var(--arta-hover-scale));

    box-shadow:
        0 18px 40px rgba(0,0,0,.14);
}

.arta-portfolio-rail::before,
.arta-portfolio-rail::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    height:100px;
    z-index:3;
    pointer-events:none;
}

.arta-portfolio-rail::before{
    top:0;

    background:
        linear-gradient(
            to bottom,
            var(--arta-bg,#fff) 0%,
            transparent 100%
        );
}

.arta-portfolio-rail::after{
    bottom:0;

    background:
        linear-gradient(
            to top,
            var(--arta-bg,#fff) 0%,
            transparent 100%
        );
}

@media (max-width:1024px){

    .arta-portfolio-rail,
    .arta-rail-track{
        gap:18px;
    }
}

@media (max-width:767px){

    .arta-portfolio-rail,
    .arta-rail-track{
        gap:12px;
    }

    .arta-rail-item img{
        border-radius:16px;
    }
}