/*
 * Blocco Gutenberg "LAYERS 01"
 * Elementi impostabili: versione, allineamento orizzontale, ordine colonne, allineamento verticale, larghezza box testo, pretitolo, titolo, sottotitolo, 
 * testo pulsante, link pulsante, URL foto
 * Aggiornato al 11-01-2024
 * Sviluppo completato desktop e mobile
 * NOTA BENE: prende il font size da queste variabili in style-variabili.css e le ridimensiona anche per mobile con calc():
 * --Gtn-PreTitolo-Fs / --Gtn-Titolo-Fs / --Gtn-SottoTitolo-Fs / --firma-fontsize
 */

.gtn-lyr {
  max-width: 1500px;
  margin: 0 auto 30px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.gtn-lyr .sx,
.gtn-lyr .dx {
  max-width: 750px;
}
.gtn-lyr .sx {
  position: relative;
  background-color: transparent;
  text-align: center;
}

/* Ordine colonne */
.gtn-lyr.testo-foto .dx {
  order: 0;
} /* Originale */
.gtn-lyr.foto-testo .dx {
  order: -1;
} /* Invertita */

.gtn-lyr .sx .boxtesto {
  display: flex;
  flex-direction: column;
  background-color: var(--grigiochiarissimo);
  z-index: 1;
}
.gtn-lyr .sx .boxtesto * {
  line-height: 125% !important;
}

.gtn-lyr .sx .boxtesto.top {
  top: 30px;
}
.gtn-lyr .sx .boxtesto.bottom {
  bottom: 30px;
}

.gtn-lyr .sx .boxtesto.sinistra {
  align-items: flex-start;
}
.gtn-lyr .sx .boxtesto.centro {
  align-items: center;
}

.gtn-lyr .dx img {
  width: 100%;
}

/* Testi */

.gtn-lyr .boxtesto.centro .pretitolo,
.gtn-lyr .boxtesto.centro .titolo,
.gtn-lyr .boxtesto.centro .sottotitolo,
.gtn-lyr .boxtesto.centro .firma {
  text-align: center !important;
}

/* Inizio controllo box testo e testo */

@media (min-width: 300px) and (max-width: 359.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 20px;
	}
/*
	.gtn-lyr .pretitolo {
	  font-size: calc( var(--titolopagina-form01-pretitolo-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: calc( var(--titolopagina-form01-titolo-fontsize) * 0.65 ); /*22*
	  margin: 10px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: var(--titolopagina-form01-sottotitolo-fontsize); /*15*
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: calc( var(--firma-fontsize) * 0.81 ); /*13*
	  margin: 10px 0;
	}
*/
	.gtn-lyr a.pulsante {
	  padding: 5px 20px;
	  /* margin: 20px 0px 0px 0px; */
	}

}

@media (min-width: 360px) and (max-width: 479.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 20px;
	}

/*
	.gtn-lyr .pretitolo {
	  font-size: calc( var(--titolopagina-form01-pretitolo-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: calc( var(--titolopagina-form01-titolo-fontsize) * 0.7 ); /*24*
	  margin: 20px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: calc( var(--titolopagina-form01-sottotitolo-fontsize) * 0.80 ); /*16*
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: calc( var(--firma-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
*/

	.gtn-lyr a.pulsante {
	  padding: 10px 30px;
	  /* margin: 20px 0px 10px 0px; */
	}

}

@media (min-width: 480px) and (max-width: 767.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 20px 30px 20px 30px;
	}

/*
	.gtn-lyr .pretitolo {
	  font-size: calc( var(--titolopagina-form01-pretitolo-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: calc( var(--titolopagina-form01-titolo-fontsize) * 0.75 ); /*26*
	  margin: 20px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: calc( var(--titolopagina-form01-sottotitolo-fontsize) * 0.80 ); /*16*
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: calc( var(--firma-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
*/

	.gtn-lyr a.pulsante {
	  padding: 10px 30px;
	  /* margin: 20px 0px 10px 0px; */
	}

}

@media (min-width: 768px) and (max-width: 991.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 20px 25px 20px 25px;
	}

/*
	.gtn-lyr .pretitolo {
	  font-size: calc( var(--titolopagina-form01-pretitolo-fontsize) * 0.81 ); /*13*
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: calc( var(--titolopagina-form01-titolo-fontsize) * 0.6 ); /*20*
	  margin: 10px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: calc( var(--titolopagina-form01-sottotitolo-fontsize) * 0.70 ); /*14*
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: calc( var(--firma-fontsize) * 0.81 ); /*13*
	  margin: 10px 0;
	}
*/

	.gtn-lyr a.pulsante {
	  padding: 10px 30px;
	  /* margin: 20px 0px 5px 0px; */
	}

}

@media (min-width: 992px) and (max-width: 1199.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 20px 30px 20px 30px;
	}

/*
	.gtn-lyr .pretitolo {
	  font-size: calc( var(--titolopagina-form01-pretitolo-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: calc( var(--titolopagina-form01-titolo-fontsize) * 0.7 ); /*24*
	  margin: 10px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: calc( var(--titolopagina-form01-sottotitolo-fontsize) * 0.80 ); /*16*
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: calc( var(--firma-fontsize) * 0.88 ); /*14*
	  margin: 10px 0;
	}
*/

	.gtn-lyr a.pulsante {
	  padding: 10px 30px;
	  /* margin: 20px 0px 10px 0px; */
	}

}

@media (min-width: 1200px) and (max-width: 1599.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 30px 30px 20px 30px;
	}

/*
	.gtn-lyr .pretitolo {
	  font-size: var(--titolopagina-form01-pretitolo-fontsize); /*16*
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: calc( var(--titolopagina-form01-titolo-fontsize) * 0.9 ); /*30*
	  margin: 20px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: var(--titolopagina-form01-sottotitolo-fontsize); /*20*
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: var(--firma-fontsize); /*16*
	  margin: 10px 0;
	}
*/

	.gtn-lyr a.pulsante {
	  padding: 10px 30px;
	  /* margin: 20px 0px 10px 0px; */
	}

}

@media (min-width: 1600px) and (max-width: 9999.98px) {

	.gtn-lyr .sx .boxtesto {
	  padding: 50px 40px 30px 40px;
	}

/*
	.gtn-lyr .pretitolo {
	  font-size: var(--titolopagina-form01-pretitolo-fontsize);
	  margin: 10px 0;
	}
	.gtn-lyr .titolo {
	  font-size: var(--titolopagina-form01-titolo-fontsize);
	  margin: 10px 0;
	}
	.gtn-lyr .sottotitolo {
	  font-size: var(--titolopagina-form01-sottotitolo-fontsize);
	  margin: 10px 0;
	}
	.gtn-lyr .firma {
	  font-size: var(--firma-fontsize);
	  margin: 10px 0;
	}
*/

	.gtn-lyr a.pulsante-base {
	  padding: 10px 30px;
	  /* margin: 20px 0px; */
		display:inline-block;
		
	}

}

/* Fine controllo box testo e testo */

/* Inizio controlli generali */

@media (min-width: 768px) {

  /* Testo-Foto */
  .gtn-lyr.testo-foto .sx .boxtesto {
    right: -50px;
  }

  /* Foto-Testo */
  .gtn-lyr.foto-testo .sx .boxtesto {
    left: -50px;
  }

  /* Entrambi */
  .gtn-lyr .sx .boxtesto {
    position: absolute;
  }
  .gtn-lyr .sx .boxtesto.center {
    top: 50%;
    transform: translateY(-50%);
  }
  .gtn-lyr .sx .boxtesto.stretto {
    width: 70%;
  }
  .gtn-lyr .sx .boxtesto.largo {
    width: 100%;
  }
}

@media (max-width: 767.98px) {

  .gtn-lyr {
    grid-template-columns: 1fr;
  }

  /* Testo-Foto */
  .gtn-lyr.testo-foto .sx .boxtesto.top,
  .gtn-lyr.testo-foto .sx .boxtesto.center,
  .gtn-lyr.testo-foto .sx .boxtesto.bottom {
    bottom: -30px !important;
  }

  /* Foto-Testo */
  .gtn-lyr.foto-testo .sx .boxtesto.top,
  .gtn-lyr.foto-testo .sx .boxtesto.center,
  .gtn-lyr.foto-testo .sx .boxtesto.bottom {
    top: -30px !important;
  }

  /* Entrambi */
  .gtn-lyr.testo-foto .sx .boxtesto,
  .gtn-lyr.foto-testo .sx .boxtesto {
    margin: 0 auto;
  }
  .gtn-lyr.foto-testo .sx,
  .gtn-lyr.testo-foto .sx {
    background-color: transparent;
  }
  .gtn-lyr.testo-foto .sx .boxtesto,
  .gtn-lyr.foto-testo .sx .boxtesto {
    position: relative !important;
  }
  .gtn-lyr .sx .boxtesto.stretto,
  .gtn-lyr .sx .boxtesto.largo {
    width: 80%;
  }
}

/* Fine controlli generali */