-------

/* Effetto 1: l’immagine diventa in bianco e nero quando passi il mouse

.thumbnail-background {
    transition: 0.4s ease;
}

.thumbnail-background:hover {
    filter: grayscale(100%);
}

===================================================  */



/* Effetto 2: immagine che si scurisce

.thumbnail-background {
    transition: 0.4s ease;
}

.thumbnail-background:hover {
    filter: brightness(70%);
}

===================================================   */

/* Effetto 3: zoom all’hover


.thumbnail-background {
    transition: transform 0.4s ease;
}

.thumbnail-background {
    transform: scale(1.1);
}

===================================================  */
/* Effetto 4: combinato (zoom + grayscale)


.thumbnail-background {
    transition: 0.4s ease;
}

.thumbnail-background:hover {
    transform: scale(1.1);
    filter: grayscale(100%);
}

===================================================  */

 Effetto 5: immagine che si scurisce e zumma

.thumbnail-background {
    transition: 0.4s ease;
}

.thumbnail-background:hover {
    transform: scale(1.1);
    filter: brightness(70%);
}

/* ===================================================

/* (testo che appare al passaggio del mouse + effetto del thumbnail):


.thumbnail-background {
    position: relative;              /* serve per posizionare il testo 
    overflow: hidden;                /* evita che elementi escano fuori 
    transition: 0.4s ease;
}

/* Testo nascosto di default /*
.thumbnail-background::after {
    content: "Apri l'album";         /* <<< testo che vuoi mostrare 
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);   /* sfondo semitrasparente 
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    opacity: 0;                      /* nascosto 
    transition: 0.4s ease;
    pointer-events: none;            /* non blocca i click 
    font-size: 14px;
}

/* Effetto hover: immagine + testo 
.thumbnail-background:hover {
    filter: grayscale(100%);
    transform: scale(1.05);
}

.thumbnail-background:hover::after {
    opacity: 1;                      /* mostra il testo 
}

==========================



/* Forza Font Awesome Brands */
#social_media a::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}


#social_media_01::before {
    content: "\f09a";   /* Unicode icona Facebook */
}
``

#social_media_02::before {
    content: "\f16d";   /* Unicode icona Instagram */
}


#social_media a {
    font-size: 30px;
    color: #555;
    margin: 0 10px;
    transition: 0.3s ease;
}

#social_media a:hover {
    color: #007bff;
    transform: scale(1.15);
}



/* --- Correzione icone social Pangolin --- 

/* Forza il prefisso corretto per le icone brand 
#social_media a::before {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Icona Facebook 
#social_media_01::before {
    content: "\f09a";   /* codice unicode FA per Facebook 
}

/* Icona Instagram 
#social_media_02::before {
    content: "\f16d";   /* codice unicode FA per Instagram 
}

/* Stile visivo 
#social_media a {
    font-size: 28px;
    color: #555;
    padding: 8px;
    display: inline-block;
    transition: 0.3s ease;
}

#social_media a:hover {
    color: #007bff;
    transform: scale(1.15);
}