/* WORKS PAGE */

.works-container{

    width:100%;

    padding:150px 80px;

    display:flex;

    justify-content:center;

    align-items:flex-start;  /* important */

    gap:90px;
}


/* PROJECT */

.project{

    display:flex;

    flex-direction:column;

    align-items:flex-start;
}

.project-title{

    width:100%;

    font-weight:500;

    font-size:14px;

    text-transform:uppercase;

    text-align:left;

    margin-bottom:0px;
	
	opacity: 1;
}


/* IMAGE */

.project img{

    width:auto;

    height:auto;

    max-width:170px;

    display:block;

    opacity:0.3;

    transition:0.4s ease;
}

/* HOVER */

.project:hover img{

    opacity:1;
}


/* NUMBER */

.project-number{

    width:100%;

    text-align:center;

    margin-top:12px;

    font-weight:500;

    font-size:14px;
}


/* OPTIONAL */

.project:hover .project-number{

    opacity:1;
}







/* =========================
   WORKS PAGE - MOBILE
========================= */

@media screen and (max-width:768px){

.works-container{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:45px;

    padding:120px 20px 50px 20px;
}

.project{

    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
}

.project-title{

    width:100%;

    text-align:center;

    margin-bottom:15px;

    font-size:18px;
}

.project img{

    width:100%;

    max-width:320px;

    height:auto;
}

.project-number{

    margin-top:12px;

    text-align:center;
}

}