/* Website Scroll Portfolio Minimal v4 */
.wsp-grid {
    --wsp-screen-height: 320px;
    --wsp-gap: 22px;
    --wsp-radius: 24px;
    --wsp-duration: 4.8s;
    --wsp-shadow: 0 20px 48px rgba(0,0,0,.18);
    display: grid;
    gap: var(--wsp-gap);
    width: 100%;
    margin: 26px 0;
}

.wsp-columns-1 { grid-template-columns: 1fr; }
.wsp-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wsp-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsp-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wsp-card {
    min-width: 0;
    position: relative;
}

.wsp-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    border-radius: var(--wsp-radius);
    transform: translateY(0);
    transition: transform .3s ease, box-shadow .3s ease;
}

.wsp-card-link:hover,
.wsp-card-link:focus {
    transform: translateY(-8px);
    box-shadow: var(--wsp-shadow);
}

.wsp-screen {
    position: relative;
    height: var(--wsp-screen-height);
    overflow: hidden;
    border-radius: var(--wsp-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
        #0b0d12;
}

.wsp-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 22%, rgba(0,0,0,.06) 100%);
    mix-blend-mode: screen;
}

.wsp-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.wsp-scroll-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    transition:
        background-position var(--wsp-duration) cubic-bezier(.18,.92,.22,1),
        background-size var(--wsp-duration) cubic-bezier(.18,.92,.22,1),
        filter .35s ease;
    will-change: background-position, background-size;
}

.wsp-card-link:hover .wsp-scroll-bg,
.wsp-card-link:focus .wsp-scroll-bg,
.wsp-screen.wsp-active .wsp-scroll-bg {
    background-position: bottom center;
    filter: brightness(.88) contrast(1.03);
}

.wsp-screen.wsp-force-pan .wsp-scroll-bg {
    background-size: auto 122%;
}

.wsp-card-link:hover .wsp-screen.wsp-force-pan .wsp-scroll-bg,
.wsp-card-link:focus .wsp-screen.wsp-force-pan .wsp-scroll-bg,
.wsp-screen.wsp-force-pan.wsp-active .wsp-scroll-bg {
    background-position: center bottom;
}

.wsp-empty {
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(0,0,0,.05);
}

@media (max-width: 1200px) {
    .wsp-columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .wsp-columns-4,
    .wsp-columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .wsp-columns-4,
    .wsp-columns-3,
    .wsp-columns-2 { grid-template-columns: 1fr; }
    .wsp-grid { --wsp-screen-height: min(320px, 68vw); }
}
@media (prefers-reduced-motion: reduce) {
    .wsp-card-link,
    .wsp-scroll-bg {
        transition: none !important;
    }
}