/* Desktop */
.grid > .nav {
    --columns: 12;
    grid-column: span var(--columns);
    order: 1;
}
.grid > .projet {
    --columns: 12;
    grid-column: span var(--columns);
    order: 2;
}

.projet .size-1 { 
	width: 100%; 
}
.projet .size-2 { 
	width: calc(100%);
 }

 .projet .size-3 { 
	width: calc(100%);
 }

 /* sm */
@media (min-width: 640px) {
    .projet .size-1 { 
        width: 25%; 
    }
    .projet .size-2 { 
        width: calc(50%);
     }
    
     .projet .size-3 { 
        width: calc(50%);
}
}

@media (min-width: 1024px) {
	.grid > .nav {
		--columns: 2;
		grid-column: span var(--columns);
		position: sticky;
		top: 0; /* Distance depuis le haut */
		align-self: start; /* Important pour grid */

		order: 1;
	}
	.grid > .projet {
		--columns: 10;
		grid-column: span var(--columns);
		order: 2;
	}

    .projet .size-1 { 
        width: 20%; 
    }
    .projet .size-2 { 
        width: calc(20% * 2);
     }
    
     .projet .size-3 { 
        width: calc(20% * 3);
     }


}