/* Mercatino.php - Stylesheet */



.grid-container {

    display: grid;

    /* Crea 3 colonne larghe uguali (1fr = 1 frazione dello spazio) */

    grid-template-columns: repeat(3, 1fr);

    /* Definisce lo spazio tra le celle */

    gap: 15px;

    padding: 5px;

}



.grid-item {

    color: black;

    /* Cambiato in nero per visibilità, prima era bianco su sfondo chiaro? */

    padding: 10px;

    text-align: center;

    /* Meglio centrato per foto+testo */

    font-family: 'Avenir-Light', sans-serif;

    font-size: 12px;

    border: 1px solid #eee;

    /* Opzionale: per vedere i confini */

}



.grid-item img {

    display: block;

    /* Aiuta a gestire meglio margini e spazi */

    max-width: 100%;

    /* L'immagine non esce dal container */

    height: 200px;

    /* Altezza fissa o auto */

    object-fit: contain;

    /* Mantiene proporzioni senza deformare */

    margin: 0 auto 10px auto;

    /* Centra l'immagine */

}



.grigliaTitolo {

    /* Usa il punto . per la classe, non # per l'id */

    display: grid;

    /* Definisce 3 colonne di uguale larghezza */

    grid-template-columns: 1fr 1fr 1fr;

    /* Allinea gli elementi al centro verticalmente */

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 0 10px;

}



/* Opzionale: centra i testi all'interno dei div */

.grigliaTitolo div {

    text-align: center;

}



/* Riduci i margini di h1 e h3 per evitare che creino scroll verticale */

.grigliaTitolo h1,

.grigliaTitolo h3 {

    margin: 0;

    font-size: 1.1rem;

    /* Adatta la dimensione per il mobile */

}



.user-name {

    font-size: 0.8rem;

    color: #333;

    margin-bottom: 0.2rem;

}