/* Toglie i bordi grigi dai widget. Serve per corretta impaginazione del mio tema Wordpress */

@media (min-width: 1024px) {

  #content,
  .site-content {
    display: flex !important;
    align-items: stretch !important;
  }

  #primary {
    width: 70% !important;
    max-width: 70% !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
  }

  #secondary {
    width: 30% !important;
    max-width: 30% !important;
    background-color: #222222 !important;
    box-sizing: border-box !important;
  }
	
 #secondary .tagcloud,
  #secondary .wp-block-tag-cloud {
    font-size: 92% !important;
    line-height: 1.35 !important;
  }

  #secondary .tagcloud a,
  #secondary .wp-block-tag-cloud a {
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
		
}


/* Nasconde i testi dai browser su PC se c'è la clase CSS "testo-mobile" o "testo-desktop" */

@media (min-width: 1024px) {
  .testo-mobile {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .testo-desktop {
    display: none !important;
  }
}


/* Caroselli Approfondimenti: desktop e mobile */

@media (max-width: 1024px) {

  /* Nasconde il carosello desktop su smartphone */
  .carosello-desktop {
    display: none !important;
  }

  /* Galleria mobile: mostra solo la prima slide, senza uscire dai margini */
  .carosello-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* formato immagine mobile 4:5 */
    aspect-ratio: 4 / 5 !important;

    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .carosello-mobile.wp-block-gallery,
  .carosello-mobile .wp-block-gallery,
  .carosello-mobile .blocks-gallery-grid {
    display: block !important;
    columns: 1 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .carosello-mobile figure,
  .carosello-mobile .wp-block-image,
  .carosello-mobile .blocks-gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .carosello-mobile img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

}

@media (min-width: 1024px) {

  .carosello-mobile {
    display: none !important;
  }

  .carosello-desktop {
    display: block !important;
  }

}