.grid-1col {
    display: grid;
    gap: 0rem;         
}

.grid-2cols-equal {
    display: grid;
    gap: 0rem; 
    grid-template-columns: 1fr 1fr;
}

.grid-2cols-bigger {
    display: grid;
    gap: 0rem; 
    grid-template-columns: 6fr 4fr;
}

.grid-2cols-smaller {
    display: grid;
    gap: 0rem; 
    grid-template-columns: 4fr 6fr;
}

.grid-3cols-equal {
    display: grid;
    gap: 0rem; 
    grid-template-columns: repeat(3,1fr);
}
.grid-4cols-equal {
    display: grid;
    gap: 0rem; 
    grid-template-columns: repeat(4,1fr);    
}

 
@media (max-width: 540px) {     
    /* pour le footer */
    .grid-4cols-equal {
        display: grid;
        column-gap: 0rem;
        grid-template-columns: 1fr 1fr;        
        
    }
    
    .grid-2cols-equal,
    .grid-2cols-bigger,
    .grid-2cols-smaller,
    .grid-3cols-equal {
        display: grid;
        gap: 0rem;
        grid-template-columns: 1fr;
        
    }        
} /* end media */