/* On utilise une grille ajustée pour des cartes plus petites */

.container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 20px;

    padding: 2rem;

    justify-content: center;

}



/* On applique un ratio fixe à la carte et on limite sa taille */

.project-card {

    position: relative;

    overflow: hidden;

    aspect-ratio: 2/3;

    width: 100%;

    max-width: 250px; /* Limite la largeur pour éviter qu'elle prenne tout l'espace */

    background-color: #222;

    border: 1px solid #fff;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.548);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease-out;

}

.project-card:hover {

    transform: scale(1.05);

    

}



/* L'image prend toute la surface, en mode cover */

.project-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Le titre est positionné en bas à gauche avec un fond semi-transparent */

.project-card h2 {

    position: absolute;

    bottom: 0;

    left: 0;

    margin: 0;

    padding: 10px;

    background: rgba(0, 0, 0, 0.6);

    color: #fff;

    font-size: 1rem;

    width: 100%;

    box-sizing: border-box;

    text-align: left;

}

.project-container {

    display: flex;

    flex-wrap: wrap;   /* Permet de passer à la ligne si l'espace est insuffisant */

    gap: 20px;           /* Espace entre les cartes */

    padding: 2rem;

    overflow-x: auto;    /* Permet le défilement horizontal si nécessaire */

}



/* Vous pouvez conserver le style existant pour les project-card */

.project-card {

    position: relative;

    overflow: hidden;

    aspect-ratio: 2/3;

    width: 100%;

    max-width: 250px;

    background-color: #222;

    border: 1px solid #fff;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.548);

    display: flex;

    align-items: center;

    justify-content: center;

}

.project-techs {

    margin-top: 10px;

}

.tech-hashtag {

    display: inline-block;

    background-color: #f0f0f0;

    color: #333;

    padding: 5px 8px;

    margin: 2px;

    border-radius: 3px;

    font-size: 0.9em;

}