/* ==========================================
   PROJECTS GRID
========================================== */

.projects-grid{

    position: relative;

    padding: 200px 20px;

    background: var(--bg);

}


/* ==========================================
   GRID
========================================== */

.grid-container{

    display:grid;

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

    column-gap:20px;
    row-gap:120px;

}


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

.grid-project{

    grid-column:span 6;

}


.grid-project a{

    display:block;

    text-decoration:none;

  /*  color:inherit;*/

}


/* ==========================================
   MEDIA
========================================== */

.grid-project__media{
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 5px;
}


.grid-project__media img,
.grid-project__media video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================
   CAPTION
========================================== */

.grid-project__caption{

    margin-top: 10px;
    color: var(--text)

}


.caption-line{

    overflow:hidden;

}


.caption-line + .caption-line{


}


.caption-reveal{

    transform:translateY(10%);

    will-change:transform;

}


.grid-project__caption h3{

    font-size: var(--font-size-lg);

    
    letter-spacing: var(--letter-spacing-small);

}


.grid-project__caption p{

    color : var(--text-grey);

    transform:translateY(0%);

    font-size: var(--font-size-sm);

   /* text-transform:uppercase;*/

   

}

/* ==========================================
   HOVER
========================================== */

.grid-container:hover .grid-project{

    opacity: .5;

    transition: opacity .4s ease;
}

.grid-container .grid-project:hover{

    opacity: 1;
}



/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px){

    .projects-grid{

        padding: 120px 20px;
    }

    .grid-container{

        grid-template-columns: 1fr;

        row-gap: 80px;
    }

    .grid-project{

        grid-column: auto;
    }

}