.portfolio-section{
padding:120px 20px;
background:linear-gradient(160deg,#0b0b12,#1a0d36,#0b0b12);
color:#fff;
text-align:center;
}

.portfolio-container{
max-width:800px;
margin:auto;
}

.portfolio-title{
font-size:36px;
margin-bottom:10px;
}

.portfolio-subtitle{
color:#bdbddb;
margin-bottom:70px;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
perspective:800px;
}

/* CARD */
.portfolio-card{
display:block;
color:#000;
text-decoration:none;
}

.portfolio-inner{
position:relative;
border-radius:18px;
overflow:hidden;
transform-style:preserve-3d;
transition:transform .2s ease;
box-shadow:0 20px 40px rgba(0,0,0,.4);
}

.portfolio-inner img{
width:100%;
height:340px;
object-fit:cover;
display:block;
transition:transform .4s;
}

/* overlay */
.portfolio-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:25px;
background:linear-gradient(transparent,rgba(0,0,0,.9));
text-align:left;
}

.portfolio-overlay h3{
font-size:20px;
margin-bottom:6px;
}

.portfolio-overlay span{
font-size:14px;
color:#F2CE1B;
}

/* glow border */

.portfolio-inner::before{
content:"";
position:absolute;
inset:-2px;
background:linear-gradient(120deg,#5F1BF2,#7D4EBF,#F2CE1B);
z-index:-1;
filter:blur(20px);
opacity:0;
transition:.4s;
}

.portfolio-card:hover .portfolio-inner::before{
opacity:.8;
}

.portfolio-card:hover img{
transform:scale(1.05);
}

/* mobile */

@media(max-width:768px){

.portfolio-title{
font-size:28px;
}

.portfolio-inner img{
height:260px;
}

}