:root {
    --time: 50s;
}

section.tech-stack-slipping {
    padding: 120px 0;

    .tech-wrap {
        position: relative;
        margin-top: 64px;
        overflow: hidden;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 10%;
            display: block;
            background: linear-gradient(to right, #000000 0%, transparent 100%);
            z-index: 1;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 10%;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, #000000 100%);
            z-index: 1;
        }

        .marquee {
            display: flex;
            gap: 48px;
            overflow: visible;
            --scroll-end: calc(192 * var(--items-num) * 1px);
            -webkit-animation: loop var(--time) linear infinite;
        }
    }

    .tech-item {
        text-align: center;
        width: 144px;
        user-select: none;

        .tech-item-icon-wrap {
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 144px;
            height: 144px;

            svg {
                width: 80px;
                height: 80px;
            }
        }

        .tech-item__title {
            letter-spacing: 0.5px;
            margin-top: 20px;
            color: #EFEFEF;
        }
    }

    &.background-dark h2 {
        color: #FFFFFF;
    }
}


/* ANIMATION */

@-webkit-keyframes loop {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(var(--scroll-end));
    }
}


@keyframes loop {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(var(--scroll-end));
    }
}


/* MEDIA */
@media only screen and (max-width: 768px) {
    section.tech-stack-slipping {
        padding: 40px 0;

        .tech-wrap {
            margin-top: 32px;

            .marquee {
                gap: 20px;
                --scroll-end: calc(108 * var(--items-num) * 1px);
            }
        }

        .tech-item {
            width: 88px;

            .tech-item-icon-wrap {
                width: 88px;
                height: 88px;

                svg {
                    width: 48px;
                    height: 48px;
                }
            }

            .tech-item__title {
                font-size: 14px;
                margin-top: 12px;
            }
        }
    }
}

/* ( < 768 ) */


@media only screen and (max-width: 567px) {
    section.tech-stack-slipping {
        h2 {
            max-width: 250px;
        }
    }
}

/* ( < 567 ) */