.backgroundtoset{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  text-align: center;
}

.backgroundtosethalf{
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  text-align: center;
}

.bg-base{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /* fallback */
  --bg-current: none;

  background-image:
    linear-gradient(0deg,
      rgba(0,0,0,var(--alphagradient_start)) var(--percentgradient_start),
      rgba(0,0,0,var(--alphagradient_stop))  var(--percentgradient_stop)
    ),
    var(--bg-current);
}

@media (max-width: 575.98px){ .bg-base{ --bg-current: var(--bg-fit-480); } }
@media (min-width: 576px) and (max-width: 767.98px){ .bg-base{ --bg-current: var(--bg-fit-768); } }
@media (min-width: 768px) and (max-width: 991.98px){ .bg-base{ --bg-current: var(--bg-land-1200); } }
@media (min-width: 992px) and (max-width: 1399.98px){ .bg-base{ --bg-current: var(--bg-land-1920); } }
@media (min-width: 1400px){ .bg-base{ --bg-current: var(--bg-land-2400); } }

/* se vuoi gestire retina per le versioni “fit” */
@media (max-width: 767.98px) and (min-resolution: 2dppx){
  .bg-base{ --bg-current: var(--bg-fit-1080); }
}
@media (max-width: 767.98px) and (min-resolution: 3dppx){
  .bg-base{ --bg-current: var(--bg-fit-1320); }
}


.bg-base-shop{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /* fallback */
  --bg-current: none;

  background-image:
    linear-gradient(0deg,
      rgba(0,0,0,var(--alphagradient_start)) var(--percentgradient_start),
      rgba(0,0,0,var(--alphagradient_stop))  var(--percentgradient_stop)
    ),
    var(--bg-url);
}

/* ----------------------------------------------------------------- */


.wrap-tende{
	display: grid;
  grid-template-columns: repeat(2, 1fr);	
}
.box-title-tende{font-size:1.2em; font-weight: 500; padding-bottom:0.5rem}
.box-btn-tende{width:90px; border:#fff 1px solid; border-radius: 0;  font-size: 0.9em; color: #fff; background-color: none; display: block; margin: 0 auto 6rem auto}
.box-container-tende svg{width: 80px; height: 80px; fill: #fff}

.backgroundtosethalf{
  aspect-ratio: 3 / 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#fff;
  text-align: center;
}



.box-container-intro{max-width: 80%; margin-left: auto; margin-right: auto; color: #333}
.box-container-intro p{text-align: center; font-weight: 500}
.wrap-intro{ display: grid;  grid-template-columns: repeat(2, 1fr);	}
.wrap-intro .box-intro{line-height: 1em}
.wrap-intro .box-intro svg{width: 50px; height: 50px; fill: #000}
.wrap-intro .box-intro strong{font-weight: 700}
.box-btn-dark{min-width:180px; border:#333 1px solid; border-radius: 0;  font-size: 1em; color: #333; background-color: none}







/* md ≥768 */
@media (min-width: 768px){

	.box-btn-dark{font-size: 1.2em;}

	.box-btn{background-color: transparent; -webkit-transition: all var(--transition_time) ease-in-out; -moz-transition: all var(--transition_time) ease-in-out; -o-transition: all var(--transition_time) ease-in-out; -ms-transition: all var(--transition_time) ease-in-out;
      transition: all var(--transition_time) ease-in-out;}
	.box-btn:hover{background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all var(--transition_time) ease-in-out; -moz-transition: all var(--transition_time) ease-in-out; -o-transition: all var(--transition_time) ease-in-out; -ms-transition: all var(--transition_time) ease-in-out;
      transition: all var(--transition_time) ease-in-out;}

    .box-btn-tende{background-color: transparent; -webkit-transition: all var(--transition_time) ease-in-out; -moz-transition: all var(--transition_time) ease-in-out; -o-transition: all var(--transition_time) ease-in-out; -ms-transition: all var(--transition_time) ease-in-out;
      transition: all var(--transition_time) ease-in-out;}
	.box-btn-tende:hover{background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all var(--transition_time) ease-in-out; -moz-transition: all var(--transition_time) ease-in-out; -o-transition: all var(--transition_time) ease-in-out; -ms-transition: all var(--transition_time) ease-in-out;
      transition: all var(--transition_time) ease-in-out;}

    .box-btn-dark:hover{background-color: rgba(0, 0, 0, 0.3); -webkit-transition: all var(--transition_time) ease-in-out; -moz-transition: all var(--transition_time) ease-in-out; -o-transition: all var(--transition_time) ease-in-out; -ms-transition: all var(--transition_time) ease-in-out;
      transition: all var(--transition_time) ease-in-out;}

  	.review {text-align: center; max-width: 70%;}

}

/* lg ≥992 */
@media (min-width: 992px){

  .wrap-tende{ grid-template-columns: repeat(3, 1fr); }

}

/* xxl ≥1400 */
@media (min-width: 1400px){

.box-title-tende{font-size:1.6em; padding-bottom:1.5rem}
.box-btn-tende{width:120px; font-size: 1.2em; margin: 0 auto 8rem auto}
.box-container-tende svg{width: 120px; height: 120px; fill: #fff}

.review {text-align: center; max-width: 50%;}

}



/* =========================================================
   HP - BASE (fit-480)
   ========================================================= */

.bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-480.jpg"); }
.bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-480.webp"); }

.bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-480.jpg"); }
.bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-480.webp"); }

.bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-480.jpg"); }
.bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-480.webp"); }

.bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-480.jpg"); }
.bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-480.webp"); }

.bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-480.jpg"); }
.bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-480.webp"); }

.bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-480.jpg"); }
.bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-480.webp"); }


/* =========================================================
   TENDE (tile/half) - BASE (mob-720)
   ========================================================= */

.bg-tende-morbide-jpg{ --bg-url: url("../imgs/hp/bg-tende-morbide-mob-720.jpg"); }
.bg-tende-morbide-webp{ --bg-url: url("../imgs/hp/bg-tende-morbide-mob-720.webp"); }

.bg-tende-pacchetto-jpg{ --bg-url: url("../imgs/hp/bg-tende-pacchetto-mob-720.jpg"); }
.bg-tende-pacchetto-webp{ --bg-url: url("../imgs/hp/bg-tende-pacchetto-mob-720.webp"); }

.bg-tende-pannello-jpg{ --bg-url: url("../imgs/hp/bg-tende-pannelli-mob-720.jpg"); }
.bg-tende-pannello-webp{ --bg-url: url("../imgs/hp/bg-tende-pannelli-mob-720.webp"); }

.bg-tende-rullo-jpg{ --bg-url: url("../imgs/hp/bg-tende-rullo-mob-720.jpg"); }
.bg-tende-rullo-webp{ --bg-url: url("../imgs/hp/bg-tende-rullo-mob-720.webp"); }

.bg-tende-vetro-jpg{ --bg-url: url("../imgs/hp/bg-tende-vetro-mob-720.jpg"); }
.bg-tende-vetro-webp{ --bg-url: url("../imgs/hp/bg-tende-vetro-mob-720.webp"); }

.bg-tende-esterno-jpg{ --bg-url: url("../imgs/hp/bg-tende-esterno-mob-720.jpg"); }
.bg-tende-esterno-webp{ --bg-url: url("../imgs/hp/bg-tende-esterno-mob-720.webp"); }


/* =========================================================
   sm ≥576  -> fit-768 (HP + intro)
   ========================================================= */

@media (min-width: 576px){
  .bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-768.jpg"); }
  .bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-768.webp"); }

  .bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-768.jpg"); }
  .bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-768.webp"); }

  .bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-768.jpg"); }
  .bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-768.webp"); }

  .bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-768.jpg"); }
  .bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-768.webp"); }

  .bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-768.jpg"); }
  .bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-768.webp"); }

  .bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-768.jpg"); }
  .bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-768.webp"); }
}


/* =========================================================
   sm ≥576 + DPR2 -> fit-1080   (iOS-friendly)
   ========================================================= */

@media (min-width:576px) and (-webkit-min-device-pixel-ratio: 2),
       (min-width:576px) and (min-resolution: 2dppx){

  .bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-1080.jpg"); }
  .bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-1080.webp"); }

  .bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-1080.jpg"); }
  .bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-1080.webp"); }

  .bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-1080.jpg"); }
  .bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-1080.webp"); }

  .bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-1080.jpg"); }
  .bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-1080.webp"); }

  .bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-1080.jpg"); }
  .bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-1080.webp"); }

  .bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-1080.jpg"); }
  .bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-1080.webp"); }
}


/* =========================================================
   sm ≥576 + DPR3 -> fit-1320
   ========================================================= */

@media (min-width:576px) and (-webkit-min-device-pixel-ratio: 3),
       (min-width:576px) and (min-resolution: 3dppx){

  .bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-1320.jpg"); }
  .bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-fit-1320.webp"); }

  .bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-1320.jpg"); }
  .bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-fit-1320.webp"); }

  .bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-1320.jpg"); }
  .bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-fit-1320.webp"); }

  .bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-1320.jpg"); }
  .bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-fit-1320.webp"); }

  .bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-1320.jpg"); }
  .bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-fit-1320.webp"); }

  .bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-1320.jpg"); }
  .bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-fit-1320.webp"); }
}


/* =========================================================
   md ≥768 -> landscape 1200 (HP + intro)
   ========================================================= */

@media (min-width: 768px){
  .bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-land-1200.jpg"); }
  .bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-land-1200.webp"); }

  .bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-land-1200.jpg"); }
  .bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-land-1200.webp"); }

  .bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-land-1200.jpg"); }
  .bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-land-1200.webp"); }

  .bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-land-1200.jpg"); }
  .bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-land-1200.webp"); }

  .bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-land-1200.jpg"); }
  .bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-land-1200.webp"); }

  .bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-land-1200.jpg"); }
  .bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-land-1200.webp"); }
}


/* =========================================================
   lg ≥992 -> landscape 1920
   ========================================================= */

@media (min-width: 992px){
  .bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-land-1920.jpg"); }
  .bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-land-1920.webp"); }

  .bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-land-1920.jpg"); }
  .bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-land-1920.webp"); }

  .bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-land-1920.jpg"); }
  .bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-land-1920.webp"); }

  .bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-land-1920.jpg"); }
  .bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-land-1920.webp"); }

  .bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-land-1920.jpg"); }
  .bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-land-1920.webp"); }

  .bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-land-1920.jpg"); }
  .bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-land-1920.webp"); }
}


/* =========================================================
   xxl ≥1400 -> landscape 2400
   ========================================================= */

@media (min-width: 1400px){
  .bg-hp-tende-jpg{ --bg-url: url("../imgs/hp/bg-hp-tende-land-2400.jpg"); }
  .bg-hp-tende-webp{ --bg-url: url("../imgs/hp/bg-hp-tende-land-2400.webp"); }

  .bg-hp-configuratore-jpg{ --bg-url: url("../imgs/hp/bg-hp-configuratore-land-2400.jpg"); }
  .bg-hp-configuratore-webp{ --bg-url: url("../imgs/hp/bg-hp-configuratore-land-2400.webp"); }

  .bg-hp-shop-jpg{ --bg-url: url("../imgs/hp/bg-hp-shop-land-2400.jpg"); }
  .bg-hp-shop-webp{ --bg-url: url("../imgs/hp/bg-hp-shop-land-2400.webp"); }

  .bg-hp-box-tessuti-jpg{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-land-2400.jpg"); }
  .bg-hp-box-tessuti-webp{ --bg-url: url("../imgs/hp/bg-hp-box-tessuti-land-2400.webp"); }

  .bg-hp-professionisti-jpg{ --bg-url: url("../imgs/hp/bg-hp-professionisti-land-2400.jpg"); }
  .bg-hp-professionisti-webp{ --bg-url: url("../imgs/hp/bg-hp-professionisti-land-2400.webp"); }

  .bg-hp-intro-jpg{ --bg-url: url("../imgs/hp/bg-hp-intro-land-2400.jpg"); }
  .bg-hp-intro-webp{ --bg-url: url("../imgs/hp/bg-hp-intro-land-2400.webp"); }
}