:root {
    --speed: 30s;
    --transition: 0.15s;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-blur-1: 5px;
}


.card-border {
    background: rgba(240, 221, 245, 0.91);
  border: 2px solid rgba(var(--bs-secondary-rgb),0.2);
}

@-webkit-keyframes shade {
    to {
        background-position: 100% 0;
    }
}

@keyframes shade {
    to {
        background-position: 100% 0;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.scrolling-window {
    height: 250px;
    container-type: inline-size;
    transform-style: preserve-3d;
    width: 100%;
    outline: 4px dashed transparent;
    transition: outline 0.5s;
}

.scene {
    --buff: 3rem;
    height: 100%;
    width: 100%;
    -webkit-mask:
        linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
        linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
            mask:
        linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
        linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
    -webkit-mask-composite: source-in, xor;
            mask-composite: intersect;
}

.scrolling-grid {
    --count: 7; /* The number of rows you have */
    --inset: 0; /* Controls the grid animation offset on entry/exit */
    --outset: 2.5;
    height: 100%;
    width: 100%;
    margin: 0;
    list-style-type: none;
    position: relative;
    display: grid;
    padding: 0 1rem;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    transition: transform 0.5s;
    /*    3D translation */
    transform:
        rotateX(calc(var(--rotate, 0) * 20deg))
        rotateZ(calc(var(--rotate, 0) * -20deg))
        skewX(calc(var(--rotate, 0) * 20deg));
}

.scrolling-grid {
    --rotate: 1;
}

.scrolling-grid li {
    min-height: 60px;
    transform-style: preserve-3d;
    width: 100%;
    z-index: calc(1 + var(--active));
}
.scrolling-grid li::before {
    content: "";
    position: absolute;
    inset: 4px 4px -2px -2px;
    border-radius: 6px;
    background: hsl(0 0% 0% / 0.1);
    filter: blur(calc(var(--active, 0) * 8px));
    z-index: -1;
    transition: scale var(--transition), opacity var(--transition), translate var(--transition), filter var(--transition);
    transform-origin: 50% 0;
    scale: 1 calc(1 + (var(--active, 0) * 0.05));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}

.scrolling-grid:hover li {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

.scrolling-grid {
    transform-style: preserve-3d;
    gap: 1rem;
}

.scrolling-item {
    align-items: center;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    color: hsl(0 0% 10%);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    height: 100%;
    justify-content: start;
    overflow: hidden;
    padding: 1.25rem;
    text-align: center;
    width: 100%;
    transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;;
    scale: calc(1 + (var(--active, 0) * 0.05));
    transform: translate3d(0, 0, calc(var(--active, 0) * 24px));
}
.item__icon {
    width: 24px;
    color: rgb(124, 58, 237);
}
.item__text {
    flex: 1;
    text-align: center;
}

.scrolling-grid li:nth-of-type(1) { --index: 0; }
.scrolling-grid li:nth-of-type(2) { --index: 0; }
.scrolling-grid li:nth-of-type(3) { --index: 1; }
.scrolling-grid li:nth-of-type(4) { --index: 1; }
.scrolling-grid li:nth-of-type(5) { --index: 2; }
.scrolling-grid li:nth-of-type(6) { --index: 2; }
.scrolling-grid li:nth-of-type(7) { --index: 3; }
.scrolling-grid li:nth-of-type(8) { --index: 3; }
.scrolling-grid li:nth-of-type(9) { --index: 4; }
.scrolling-grid li:nth-of-type(10) { --index: 4; }
.scrolling-grid li:nth-of-type(11) { --index: 5; }
.scrolling-grid li:nth-of-type(12) { --index: 5; }
.scrolling-grid li:nth-of-type(13) { --index: 6; }
.scrolling-grid li:nth-of-type(14) { --index: 6; }

@container (width < 400px) {
    .scrolling-grid {
        --count: 14;
        --inset: 0;
        --outset: 3;
        grid-template-columns: 1fr;
    }

    .scrolling-grid li:nth-of-type(1) { --index: 0; }
    .scrolling-grid li:nth-of-type(2) { --index: 1; }
    .scrolling-grid li:nth-of-type(3) { --index: 2; }
    .scrolling-grid li:nth-of-type(4) { --index: 3; }
    .scrolling-grid li:nth-of-type(5) { --index: 4; }
    .scrolling-grid li:nth-of-type(6) { --index: 5; }
    .scrolling-grid li:nth-of-type(7) { --index: 6; }
    .scrolling-grid li:nth-of-type(8) { --index: 7; }
    .scrolling-grid li:nth-of-type(9) { --index: 8; }
    .scrolling-grid li:nth-of-type(10) { --index: 9; }
    .scrolling-grid li:nth-of-type(11) { --index: 10; }
    .scrolling-grid li:nth-of-type(12) { --index: 11; }
    .scrolling-grid li:nth-of-type(13) { --index: 12; }
    .scrolling-grid li:nth-of-type(14) { --index: 13; }

    .scrolling-grid li {
        --duration: calc(var(--speed) * 2);
        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
    }
}

@media(prefers-reduced-motion: no-preference) {
    .scrolling-grid {
        gap: 0 2rem;
    }

    .scrolling-grid li {
        --duration: calc(var(--speed) * 1);
        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
        -webkit-animation: slide var(--duration) var(--delay) infinite linear;
                animation: slide var(--duration) var(--delay) infinite linear;
        translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
    }
    .scrolling-grid li:hover {
        --active: 1;
    }
    @-webkit-keyframes slide {
        100% {
            translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
        }
    }
    @keyframes slide {
        100% {
            translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
        }
    }
    @container (width < 400px) {
        li {
            --duration: calc(var(--speed) * 2);
            --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
        }
    }
}