/* =========================================
   WORK PAGE
========================================= */


.work-page {

    padding: 140px 45px 80px;

}



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


.work-grid {

    display:grid;

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

    gap:22px;

    align-items:start;

    grid-auto-flow:dense;

}



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


.project {

    display:block;

    text-decoration:none;

    color:#F8F5EE;

}



/* Taille normale */

.project{

    grid-column:span 2;

}

/* Un peu plus grand */

.project.wide{

    grid-column:span 3;

}

/* Projet principal */

.project.large{

    grid-column:span 4;

}



/* =========================================
   IMAGE CONTAINER
========================================= */


.image-container {

    position:relative;

    overflow:hidden;

    width:100%;

}



/* =========================================
   RATIOS
========================================= */


.r16 .image-container {

    aspect-ratio:16 / 9;

}


.r43 .image-container {

    aspect-ratio:4 / 3;

}


.r21 .image-container {

    aspect-ratio:2 / 1;

}


.scope .image-container {

    aspect-ratio:2.39 / 1;

}


.portrait .image-container {

    aspect-ratio:3 / 4;

}



/* =========================================
   IMAGE
========================================= */


.image-container img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;

}


.image-container:hover img {

    transform:scale(1.03);

}



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


.project-info {

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:25px;


    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.15),
        transparent
    );


    opacity:0;

    transition:opacity .35s ease;

}



.image-container:hover .project-info {

    opacity:1;

}



.project-info h2 {

    font-size:17px;

    font-weight:500;

    letter-spacing:-0.03em;

    margin:0;

}



.project-info p {

    margin-top:5px;

    font-size:13px;

    opacity:.8;

}



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


@media(max-width:900px){


    .work-grid {

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

    }


    
.project,
.project.wide,
.project.large{

    grid-column:span 2;

}

}



@media(max-width:600px){


    .work-page {

        padding:110px 20px 50px;

    }


    .work-grid {

        grid-template-columns:1fr;

    }


.project,
.project.wide,
.project.large{

    grid-column:span 1;

}

            
}