/*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{
padding-top:30px;
display:grid;
grid-template-columns: 1fr 1fr;
text-align:left;
}

.mainIndex > article{

grid-column: 2 ;

}


/*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;         /* centro l'immagine nel contenitore */
  max-width: 50%;        /* non supera mai la larghezza del contenitore */
  height: auto;
  padding-bottom:20px;
}

.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*/
.fotoGrid4xx{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
  gap:10px;
}

.fotoGrid4xx img{
width: 380px;
}


/* 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 300px;
  grid-template-rows:auto;
  gap: 1px;
  margin:0 auto;
  max-width: 900px;
  padding:20px;
 
}

.article{
  text-align:left;
}

.immagine_post{

  display: block;
  max-width: 100%;                 /* non sfora mai la colonna */
  height: auto;

}


/*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: 900px) {

  

    html {
      font-size: 30px;}
      

    .raccolta{
      grid-template-columns: 1fr;
      gap: 16px;
      justify-items: center; }

      .logo_progetti{

      max-width: 60%;

      }

      .immagine_post{
      max-width: 75%;
      }


      .main_logo{ /*MOBILE*/
      content:url("/images/logoHomeMobile.png"); /*logo cambia in versione mobile*/  
      max-width: 100%;
      
      }

      

      .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: 40px;  
        text-align: left;
        padding:0 20px 0 20px;

      }

    }