body {
    height: 100%;
}
/* Stile per il mosaico (griglia) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  /* 3 colonne */
    gap: 15px;  /* Distanza tra le immagini */
    margin: 108px 20px; /* Distanza verticale dal resto del contenuto */
}

/* Stile per ogni elemento della griglia */
.grid-item {
    position: relative;
    align-items: center;
    width: 90%;  /* Assicura che ciascun riquadro occupi tutta la larghezza disponibile */
    padding-top: 90%;  /* Mantiene un rapporto 1:1, cioè quadrato */
    overflow: hidden; /* Nasconde eventuali parti dell'immagine che escono dal riquadro */
    border: 1px solid #3333338a;  /* Bordo visibile attorno ad ogni quadrato */
    box-sizing: border-box; /* Include il bordo nel calcolo delle dimensioni */
    transition: transform 0.3s ease;  /* Aggiungi una transizione dolce per l'effetto */
    z-index: 1; /* Imposta il valore di default del z-index per tutti gli oggetti */
}

/* Quando si passa sopra l'elemento, aumenta la dimensione e spostalo sopra gli altri */
.grid-item:hover {
    transform: scale(1.1);  /* Aumenta la dimensione dell'immagine quando ci si passa sopra */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Aggiunge un'ombra per enfatizzare l'immagine */
    z-index: 10; /* Sposta l'oggetto sopra gli altri quando si espande */
}

/* Stile per le immagini */
.grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease; /* Aggiunge una transizione dolce per l'effetto di sfocatura */
}

/* Stile per il paragrafo sotto ogni immagine */
.image-description {
    position: absolute;
    top: 200px;
    bottom: 0px;  /* Posiziona il testo sul fondo dell'immagine */
    left: 0;
    right: 0;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, 0.5);  /* Sfondo semi-trasparente */
    color: white;  /* Testo bianco */
    padding: 0px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    z-index: 2; /* Assicurati che il testo sia sopra l'immagine */
}
.image-description span{
    font-size: 40px;
    text-align: center;
}

/* Stile per la parte del testo in grassetto */
.bold-text {
    font-weight: bold;
    font-size: 1rem; 
    font-family: Arial, Helvetica, sans-serif;/* Dimensione del testo in grassetto */
}