/* =====================================
        PROJECTS
        projects.css
===================================== */


/* ===============================
        SECTION
================================ */


.projects{

    background:#fff;

}



/* ===============================
        GALLERY
================================ */


.gallery{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:60px;

}



/* ===============================
        PROJECT CARD
================================ */


.project{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    box-shadow:var(--shadow);

    cursor:pointer;

}



/* IMAGE */


.project img{

    width:100%;

    height:280px;

    object-fit:cover;

    display:block;

    transition:.5s;

}



.project:hover img{

    transform:scale(1.08);

}



/* ===============================
        INFO OVERLAY
================================ */


.project-info{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:25px;

    background:

    linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.15)
    );


    color:white;

    transform:translateY(100%);

    transition:.4s;

}



.project:hover .project-info{

    transform:translateY(0);

}



/* TITLE */


.project-info h3{

    color:white;

    font-size:22px;

    margin-bottom:10px;

}



/* DESCRIPTION */


.project-info p{

    color:#f2f2f2;

    font-size:15px;

    line-height:1.5;

}



/* ===============================
        LIGHTBOX SUPPORT
================================ */


.close-lightbox{

    position:absolute;

    top:20px;

    right:30px;

    color:#fff;

    font-size:48px;

    line-height:1;

    cursor:pointer;

    z-index:1;

}


.project img[data-lightbox]{

    cursor:pointer;

}

/* END PROJECTS */