.portfolio{
padding:40px 3% 120px;
}

/* filtros */

.portfolio-filter{
display:flex;
justify-content:center;
flex-wrap:wrap;
border-top:1px solid #2a2924;
border-bottom:1px solid #2a2924;
padding:18px 0;
margin-bottom:40px;
gap:10px;
}

.filter{
background:none;
border:0;
font:500 14px "Google Sans Flex", sans-serif;
letter-spacing:1.5px;
text-transform:uppercase;
cursor:pointer;
color:#2a2924;
opacity:.8;
transition:opacity .3s,color .3s;
line-height:1;
}

.filter:hover{
opacity:1;
}

.filter.active{
opacity:1;
color:#00BABD;
}

/* GRID */

.portfolio-grid{
max-width:1400px;
margin:auto;
display:flex;
flex-wrap:wrap;
}

/* proyectos */

.project{
width:25%;
padding:15px;
box-sizing:border-box;
}

.project img{
width:100%;
display:block;
border-radius:40px;
transition:transform .7s cubic-bezier(.77,0,.18,1);
will-change:transform;
}

/* hover */

.project:hover img{
transform:scale(1.06);
}

/* responsive */

@media (max-width:1200px){
.project{width:33.333%;}
.filter{ line-height:1; font-size:13px; opacity:1;}

}


@media (max-width:900px){

.portfolio{
padding:70px 3% 120px;
}
.portfolio-filter{ margin-bottom: 40px; gap:10px;}
.filter{ line-height:1; font-size:13px; opacity:1;}
    
}


@media (max-width:600px){
.project{width:50%; padding:5px;}
.project img{ border-radius:30px;}
    
.portfolio{
padding:80px 3% 70px;
}
.filter { letter-spacing: 1px;}
.portfolio-filter{ margin-bottom: 40px;}

.project:hover img{
transform: none;
}
    
}