@media (min-width: 769px) {
    .competences {
        color: black;
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        grid-template-rows: auto;
        width: 93%;
        box-sizing: border-box;
    }

    .competences .competence {
        display: flex;
        text-align: center;
        justify-content: center;
        padding: 5%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
        margin: 4%;
        backdrop-filter: blur(10px);
        flex-direction: column;
        transition-duration: 0.25s;
        width: 84%;
    }

    .competences .competence i {
        font-size: 3vw;
        color:black;
    }

    .competences .competence .competence-icon {
        border-radius: 5px;
        margin:10% auto;
    }

    .competence h1{
        font-size:1.7vw;
    }

    .competence p{
        font-size:0.8vw;
    }

    .competence:hover {
        background-color: black;
        color: white;
    }
    .competence:hover h1,.competence:hover i, .competence:hover p{
        color: white;
    }

    .light-mode .competences {
        color: white;
    }
    
    .light-mode .competences .competence {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }
    
    .light-mode .competences .competence i {
        color: white;
    }
    
    .light-mode .competence:hover {
        background-color: white;
        color: black;
    }
    
    .light-mode .competence:hover h1,
    .light-mode .competence:hover i,
    .light-mode .competence:hover p {
        color: black;
    }    
}


@media (max-width: 768px) {
    .competences {
        color: white;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Trois colonnes avec des largeurs égales */
        grid-template-rows: auto;
        gap: 10px;
        column-gap: 0;
        box-sizing: border-box;
        justify-items: center;
    }

    .competences .competence {
        display: flex;
        text-align: center;
        justify-content: center;
        padding: 2%;
        background-color: rgba(0, 0, 0, 0.437);
        border-radius: 5px;
        backdrop-filter: blur(10px);
        flex-direction: column;
        transition-duration: 0.25s;
        width: 85%;
        margin-left: -5%;
    }

    .competences .competence i {
        font-size: 6vw;
        color:white
    }

    .competences .competence .competence-icon {
        border-radius: 5px;
        margin: 5% auto;
    }

    .competence h1{
        font-size: 4vw;
    }

    .competence p{
        font-size:2.5vw;
    }

    .competence:hover {
        background-color: white;
        color: black
    }
    .competence:hover h1,.competence:hover i, .competence:hover p{
        color: black;
    }

    .light-mode .competences {
        color: white;
    }
    
    .light-mode .competences .competence {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }
    
    .light-mode .competences .competence i {
        color: white;
    }
    
    .light-mode .competence:hover {
        background-color: white;
        color: black;
    }
    
    .light-mode .competence:hover h1,
    .light-mode .competence:hover i,
    .light-mode .competence:hover p {
        color: black;
    }
}