.intro-bio {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #1a1a1a, #333); /* sfumatura elegante */
  display: flex;
  align-items: center;    /* centra verticalmente */
  justify-content: center; /* centra orizzontalmente */
  text-align: center;
  border-bottom: 3px solid #e63946; /* linea colorata per dare carattere */
  padding-top: 20px;
  box-sizing: border-box;
}

.intro-bio h1{padding: 0px !important;}

.intro-bio h1 {
  color: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 2em;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase; /* stile moderno */
  margin: 0;
}




h1{font-size: 3rem; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid black; width: 90%;}

@media (max-width: 768px) {
    h1 {
        font-size:1.8rem;
    }
}

.elemento{
  width: 85%;
  border-bottom: 1px solid black;
  padding-top: 15px;
}

.testo-blog{padding-bottom: 10px; text-align: justify;}

.foto-blog {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 colonne */
  grid-template-rows: 1fr;               /* 1 riga */
  gap: 1px;
  padding-bottom: 10px;
              /* shorthand per row e column gap */
}

.fotogrid1 {
  grid-column: 1; /* colonna 1 */
  grid-row: 1;    /* riga 1 */
}

.fotogrid2 {
  grid-column: 2; /* colonna 2 */
  grid-row: 1;    /* riga 1 */
}

.foto-blog img{ width: 100%; object-fit:cover; height: 65vh; }
.foto-blog-3 img{ max-width: 100%; height: auto;}
.posTop{object-position: top;}

.foto-blog-3 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonne uguali */
  grid-template-rows: 1fr 1fr;    /* 2 righe uguali */
  gap: 1px;
  padding-bottom: 10px;                    /* spazio tra le celle */
}

/* Foto grande sulla prima colonna */
.foto1 {
  grid-column: 1 / 2; /* prima colonna */
  grid-row: 1 / 3;    /* occupa entrambe le righe */
}

/* Foto sopra nella seconda colonna */
.foto2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* Foto sotto nella seconda colonna */
.foto3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.foto1-1 {
  grid-column: 1;
  grid-row: 1;
}
.foto1-2 {
  grid-column: 2;
  grid-row: 1;
}

/* Seconda riga */
.foto2-1 {
  grid-column: 1;
  grid-row: 2;
}
.foto2-2 {
  grid-column: 2;
  grid-row: 2;
}



/* Assicuriamo che le immagini riempiano il loro contenitore */
.foto-blog-3 div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foto-show {
  height: 100vh;           /* altezza totale della finestra */
  width: 100%;             /* tutta la larghezza */
  position: fixed;      /* utile se vuoi overlay o absolute positioning */
  overflow: hidden;        /* taglia eventuali parti che escono */
  top: 0;
  right: 0;
  z-index: 500;
}

.foto-show img {
  width: 100%;             /* larghezza piena */
  height: 100%;            /* altezza piena */
  object-fit: cover;       /* mantiene le proporzioni e riempie il contenitore */
  object-position: center; /* centra l’immagine */
  position: absolute;      /* tutte le immagini sovrapposte */
  top: 0;
  left: 0;
}

.foto-clip{display: none; left: 100%; transition: left 0.8s ease;}
.right-clip{right: 100%;}
.foto-clip.activated{display: block; left: 0;}

.foto-show.deactivate{display: none;}

.main-blog
{
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  padding-bottom: 100px;
  line-height: 1.5;
  transition: transform 4s ease, opacity 4s ease;
  transform: translateY(100%); /* posizione normale */
  opacity: 0;
}


.main-blog.activate{
  display: flex;
  transition: transform 1.5s ease, opacity 6s ease;
  transform: translateY(0); /* posizione normale */
  opacity: 1;
}

.titolo-blog{padding-bottom: 15px!important;}
.titolo-blog h2{font-size: 1.5rem; padding-bottom: 2px !important; margin-bottom: 1px !important;}
.main-blog h2{width: 90%; font-size: 1.3rem; padding-top: 10px;}
.blog-desc{width: 85%; font-size: 1rem; text-align: justify;}



.no-border {
    border-bottom: none; /* rimuove il bordo sotto */
}

.foto4X4{ height: 55vh !important; }



@media (max-width: 1024px) {

.foto-blog img{ width: 100%; object-fit:cover; height: 30vh; }
.foto4X4{ height: 30vh !important; }

}

@media (max-width: 768px) {
    .intro-bio h1 {
        font-size: 1.3rem !important;
    }
.blog-desc{width: 85%; font-size: 0.8rem;}
    .titolo-blog h2{font-size: 1.2rem; padding-bottom: 2px !important; margin-bottom: 1px !important;}

.foto-blog img{ width: 100%; object-fit:cover; height: 28vh; }
.foto4X4{ height: 25vh !important; }

}

@media screen
  and (min-width: 1024px)
  and (max-width: 1024px)
  and (min-height: 600px)
  and (max-height: 600px)
  and (orientation: landscape) { .foto-blog img{ width: 100%; object-fit:cover; height: 50vh; } .foto4X4{ height: 45vh !important; }}