.containerarticle{
    display: flex;
    flex-wrap: wrap;
    border-radius: 30px;
    justify-content: center;
    
}

.article{
    border-radius: 20px;
    background-color: black;;
}

.article p{
    word-break: normal;
    text-decoration: none;
    text-align: center;
    color: white;
}

.article img{ 
    border-radius: 20px;
}

@media (max-width: 500px) {

        .header1 {
            flex-direction: column;
            align-items: flex-start;
        }
    
        .nav-links {
            flex-direction: column;
            width: 100%;
            display: none; /* Masqué par défaut */
        }
    
        .menu-toggle {
            display: flex; /* Afficher le menu sur mobile */
            flex-direction: column;
            cursor: pointer;
        }
    
        .menu-toggle div {
            background: white;
            height: 4px;
            width: 25px;
            margin: 3px 0;
        }
    
        .containerarticle{ 
            gap: 1rem;
            padding: 3rem;
        }
    
        .article {
            width: 200px;
            padding: 1rem;
            text-align: center;
        }
    
        .article img{
            height: 8rem;
        }
}


@media (min-width: 501px) and (max-width: 1024px) {

    .containerarticle{ 
        gap: 1rem;
        padding: 3rem;
    }

    .article{
        width: 200px;
        padding: 1rem;
        text-align: center;
    }

    .article img{
        height: 8rem;
    }
}


@media (min-width: 1025px) {

    .containerarticle{ 
        margin-left: 5rem;
        margin-right: 5rem;
        gap: 1rem;
        padding: 3rem;
    }

    .article{
        padding: 2rem;
        width: 300px;
    }

    .article img{
        height: 200px;
    }
}