/* =========================================================
   services.css — Work / Portfolio grid
   ========================================================= */

.services{
    padding:20px;
}

.projects-grid{
    max-width:650px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.project-card{
    display:block;
    background:transparent;
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
    transform:rotate(-1.5deg);
}

.project-card:nth-child(even){
    transform:rotate(1.5deg);
}

.project-card:hover,
.project-card:focus-visible{
    transform:rotate(0deg) translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.25);
}

.project-icon{
    aspect-ratio:auto;
    background:rgba(255,255,255,.04);
}

.project-icon img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.project-text{
    padding:12px;
    text-align:center;
    color:#fff;
}

.project-text h2{
    font-size:1rem;
    margin:0;
    font-weight:200;
}

@media (max-width:768px){

    .projects-grid{
        max-width:500px;
        gap:12px;
    }

    .project-icon img{
        height:140px;
    }

    .project-text{
        padding:10px;
        background:rgba(0,0,0,.35);
    }

    .project-text h2{
        font-size:.9rem;
    }
}