.ts-projects-grid{
    display:grid;
    grid-template-columns:repeat(var(--ts-project-columns, 4), minmax(0, 1fr));
    gap:24px;
    width:100%;
}

.ts-project-card{
    min-width:0;
    margin:0;
}

.ts-project-image-wrap{
    position:relative;
    overflow:hidden;
    aspect-ratio:4 / 3;
    background:#111;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
    isolation:isolate;
}

.ts-project-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.001);
    transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}

.ts-project-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 38%,
        rgba(0,0,0,.18) 58%,
        rgba(0,0,0,.88) 100%
    );
    transition:background .35s ease;
}

.ts-project-title{
    position:absolute;
    z-index:2;
    left:22px;
    right:22px;
    bottom:20px;
    margin:0;
    color:#fff;
    font-size:clamp(18px, 1.35vw, 24px);
    line-height:1.15;
    font-weight:700;
    letter-spacing:-.02em;
    text-shadow:0 2px 14px rgba(0,0,0,.45);
    transform:translateY(0);
    transition:transform .35s ease, color .35s ease;
}

.ts-project-image-wrap::after{
    content:"";
    position:absolute;
    z-index:3;
    left:22px;
    bottom:13px;
    width:38px;
    height:2px;
    border-radius:99px;
    background:#f5a623;
    transform-origin:left center;
    transform:scaleX(.55);
    opacity:.92;
    transition:transform .35s ease;
}

.ts-project-card:hover .ts-project-image,
.ts-project-card:focus-within .ts-project-image{
    transform:scale(1.07);
    filter:saturate(1.06) contrast(1.03);
}

.ts-project-card:hover .ts-project-overlay,
.ts-project-card:focus-within .ts-project-overlay{
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.04) 25%,
        rgba(0,0,0,.28) 58%,
        rgba(0,0,0,.92) 100%
    );
}

.ts-project-card:hover .ts-project-title,
.ts-project-card:focus-within .ts-project-title{
    transform:translateY(-4px);
    color:#fff;
}

.ts-project-card:hover .ts-project-image-wrap::after,
.ts-project-card:focus-within .ts-project-image-wrap::after{
    transform:scaleX(1);
}

@media (max-width:1024px){
    .ts-projects-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:20px;
    }
}

@media (max-width:600px){
    .ts-projects-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .ts-project-image-wrap{
        border-radius:13px;
    }

    .ts-project-title{
        left:18px;
        right:18px;
        bottom:18px;
        font-size:21px;
    }

    .ts-project-image-wrap::after{
        left:18px;
        bottom:11px;
    }
}

@media (prefers-reduced-motion:reduce){
    .ts-project-image,
    .ts-project-overlay,
    .ts-project-title,
    .ts-project-image-wrap::after{
        transition:none !important;
    }
}