* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: black;
}

.wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 80px auto;
}

#posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Colonnes dynamiques */
    gap: 20px; /* Espacement entre les articles */
}

#posts article {
    background-color: #f9f9f9; /* Arrière-plan des articles */
    border: 1px solid #ddd; /* Bordure fine */
    border-radius: 8px; /* Coins arrondis */
    overflow: hidden; /* Contenu qui dépasse est masqué */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effet d'ombre */
    padding: 15px; /* Espacement interne */
}

#posts .image img {
    margin-bottom: 15px; /* Créer un espace vers le bas de l'image */
    width: 100%; /* Remplit la largeur du conteneur */
    height: 200px; /* Hauteur fixe pour toutes les images */
    object-fit: cover; /* Maintient les proportions et remplit l'espace */
    border-radius: 8px; /* Coins arrondis (optionnel) */
}

#posts .text {
    margin-top: 10px; /* Ajoute un léger espace au-dessus du texte */
    line-height: 1.6; /* Améliore la lisibilité du texte */
}

#posts .text h3 {
    margin-top: 1em;
    font-size: 1em;
}

@media (max-width:700px) {
    .wrapper {
        max-width: 90%;
        margin: 20px auto;
    }
}