/* Example CSS file */ 
main{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 var(--longmarge);
    gap: 0 var(--longmarge);
}

.project{
   grid-template-columns: span 1;
}

.project:hover .imPro img:last-of-type{
    display: block;
}

.project:hover .imPro img:first-of-type{
    display: none;
}

.imPro{
    width: 100%;
    height: 50vh;
}

.imPro img{
    object-fit: cover;
    width: 100%;
    display: block;
    height: 100%;
}

.imPro img:last-of-type{
    display: none;
}

.infoProjet{
    padding: var(--longmarge) 0;
    padding-top: var(--marge);
}

.titreProjet{
    display: inline-block;
    vertical-align: top;
    width: 35%;
}

@media (orientation:portrait){

    main{
     grid-template-columns: repeat(1, 1fr);
     gap: 0;

    }

    .imPro{
        height: fit-content;
    }

    .infoProjet{
        padding-top: var(--marge);
    }

    .titreProjet{
        width: 50%;
    }


}