/*wrap social prende le icone di bootstrap e le mette in ordine in un contenitore flex*/

.wrapSocial{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Imposta il main della pagina centrato e GRID type */
.mainIndex{
display:grid;
grid-template-columns: 1fr 1fr;
text-align:left;
}

.mainIndex > article{

grid-column: 2 ;

}

.news{

  margin-top:25px

}


/*CAROUSEL INDEX*/

.carouselWrapper{

width: min(500px, 100%);  /* limita la larghezza del carousel */
margin: 0 0 0 auto;
padding-right: 40px ;       
grid-column: 1;

}

.carousel-itemWrapper{

max-width: 1000px;
display: block;
margin-left: auto;

}



.main_logo {
  display: block;         /* evita comportamenti da inline */
  margin: 0 auto;
  width:100%;
  max-width: 1200px;
  
}

.logo_progetti {
  display: block;         /* evita comportamenti da inline */
  margin: 0 auto;         /* centro l'immagine nel contenitore */
  max-width: 320px;        /* non supera mai la larghezza del contenitore */
  height: auto;
}
 
.foto{
display: block;         /* evita comportamenti da inline */
margin: 0 auto;         /* centro l'immagine nel contenitore */       
height: auto;
max-width: 20%;

}


/* Pagina ABOUT US*/
.fotoGrid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:50px;
  
}

.fotoGrid > img{
  display:block;          /* in flex, meglio block */
  flex: 0 1 350px;        /* base ~350px, può restringersi, NON cresce */
  min-width: 0;           /* <-- sblocca la riduzione sotto l'intrinseco */
 
 
 

}


/* CSS dedicati ARTICOLI PAGINA PROGETTI 

Si possono rifinire generalizzando l'astrazione dei grid unificando lo stile con 
le pagine che richiedono doppia colonna.

*/



.raccolta{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  
}

.articolo{
  display:grid;
  grid-template-columns: 1fr 2fr ;
  grid-template-rows: 3em 1fr;
  grid-template-areas: "titolo titolo" 
                      "image contenuto" ;
  gap:15px;
  max-width:800px;
  margin-bottom:60px;
  margin-inline: 5px;
}

.titolo{  grid-area: titolo;
 
}
.immagine_post{
  display:inline-block;
  margin-inline: auto;
  width: 100%;
  height: auto;
  object-fit: cover;
  grid-area: image;
  border-radius: 5%;

}
.contenuto{
   grid-area: contenuto;
}


/*articolo pagina AboutMe*/
.text_generale_centrato_grid{

display: grid;
grid-template-columns: 1fr 1fr;
text-align:left;
gap: 50px;
max-width: 1200px;
margin:0 auto;
width: 100%;

}







/*Setup condizioni per Cellulari e Tablet*/

  @media (max-width: 850px) {

    .fotoGrid img{
   
    }
  

    html {
      font-size: 30px;}
      

  .articolo{
  
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:  "titolo" 
                          "image" 
                          "contenuto" ;
    gap:1px;
   
    }
    .titolo_Orange{
      font-size: 0.8rem;
    }
    .titolo{
      justify-self: center;
      margin:0;
      padding:10px;
    }

    .contenuto{
      max-width: 80%;
      margin-inline: auto;
    }

      .logo_progetti{

      max-width: 60%;

      }

      .immagine_post{
      max-width: 75%;
      }


      .main_logo{ /*MOBILE*/
      content:url("/images/logoHomeMobile.png"); /*logo cambia in versione mobile*/  
      width:80%;
      min-width:300px;
      margin:0 auto;

      
      }

      

      .corpo_DarkGray_Bold{
        font-size: 90%;
      }
      
      .foto{
        max-width: 60%;
      }

      /* ABOUTUS.html */
      .text_generale_centrato_grid
      {
      grid-template-columns: 1fr ;
      gap: 16px;
      justify-items: center;}    
    
      

     /*index.html*/

      .dailyBlog{
      text-align: center; /* Questo allinea e sistema la scritta dailyBlog*/
      font-size:30px;
      margin-right:auto;
      
      }

      body{

      margin-top:80px;

      }
      .mainIndex{
          grid-template-columns: 1fr; /* Questo allinea e sistema la scritta dailyBlog*/
          padding-top:0px;
          padding-bottom:0px;
      }

      .carouselWrapper{
      padding: 0;
      margin: 0 auto;
      }

      .carousel-itemWrapper{
        margin-top: 0;
        padding-top: 0;
        grid-column:1 ;
        grid-row:1;
      }

      .mainIndex > article{

        grid-column:1 ;
        grid-row:2;
        margin-top: 15px;  
        text-align: left;
        padding:0 20px 0 20px;

      }

    }