.portfolio{

padding:170px 0;

}

.portfolio-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:34px;

}

.project-card{

overflow:hidden;

border-radius:30px;

background:#111216;

border:1px solid rgba(255,255,255,.06);

transition:.4s;

}

.project-card:hover{

transform:translateY(-12px);

box-shadow:0 40px 100px rgba(0,0,0,.35);

}

.project-card img{

display:block;

width:100%;

aspect-ratio:4/3;

object-fit:cover;

transition:.6s;

}

.project-card:hover img{

transform:scale(1.05);

}

.project-content{

padding:30px;

}

.project-content span{

display:inline-block;

margin-bottom:18px;

padding:8px 14px;

border-radius:999px;

background:rgba(124,58,237,.12);

color:#8B5CF6;

font-size:13px;

font-weight:600;

}

.project-content h3{

margin-bottom:14px;

}

.project-content p{

color:#AAB6C8;

}

.featured{

transform:scale(1.03);

}

.featured:hover{

transform:scale(1.03) translateY(-12px);

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:1200px){

    .portfolio-grid{

        grid-template-columns:repeat(2,1fr);

        gap:28px;

    }

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-10px);

    }

}

/*==========================================================
TABLET PEQUEÑA
==========================================================*/

@media (max-width:992px){

    .portfolio{

        padding:110px 0;

    }

    .portfolio-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

}

/*==========================================================
MÓVIL
==========================================================*/

@media (max-width:576px){

    .portfolio{

        padding:80px 0;

    }

    .project-card{

        border-radius:24px;

    }

    .project-card img{

        aspect-ratio:16/10;

    }

    .project-content{

        padding:24px;

    }

    .project-content span{

        padding:7px 12px;

        font-size:12px;

        margin-bottom:14px;

    }

    .project-content h3{

        font-size:24px;

        margin-bottom:12px;

    }

    .project-content p{

        font-size:16px;

        line-height:1.7;

    }

    /* En pantallas táctiles no merece la pena exagerar el hover */

    .project-card:hover{

        transform:none;

        box-shadow:none;

    }

    .project-card:hover img{

        transform:none;

    }

}