.hero,.story {position:relative;isolation:isolate}
.hero {--sparks:url("assets/officina-scintille.jpg");background:#1c272d;color:#fff}
.hero::before,.story::before {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;
}
.hero::before {
  inset:0 32% 0 0;
  background-image:linear-gradient(90deg,rgba(19,27,32,.89) 0%,rgba(19,27,32,.65) 36%,rgba(19,27,32,.26) 68%,#1c272d 100%),var(--sparks);
  background-position:center,center 48%;
  background-size:cover,max(118%, 490px) auto;
}
.hero .eyebrow,.hero h1 em {color:#f2bfa1}
.hero .intro {color:#f3f3f3}
.hero .hero-actions .btn {background:#fff;color:#1c272d;border-color:#fff}
.hero .hero-actions .btn.light {background:#1c272d;color:#fff;border-color:#ddd}
.hero .hero-actions .btn:hover {background:#e8ecee;color:#1c272d}
.story {overflow:hidden}
.story::before {
  inset:0;
  background-image:linear-gradient(90deg,#182329 0%,#182329 34%,rgba(24,35,41,.86) 61%,rgba(24,35,41,.58) 87%,rgba(24,35,41,.30) 100%),url("assets/officina-componenti.jpg");
  background-position:center,right 61%;
  background-size:cover,64% auto;
}
.story p {color:#e0e5e7}
@media(max-width:760px) {
  .hero::before {
    inset:0 0 auto;
    height:min(570px,78%);
    background-image:linear-gradient(90deg,rgba(19,27,32,.87),rgba(19,27,32,.42)),linear-gradient(0deg,#1c272d,transparent 34%),var(--sparks);
    background-size:cover,cover,max(118%, 440px) auto;
    background-position:center,center,center 49%;
  }
  .story::before {
    background-image:linear-gradient(0deg,#182329 0%,rgba(24,35,41,.89) 48%,rgba(24,35,41,.37) 100%),url("assets/officina-componenti.jpg");
    background-position:center,center 42%;
    background-size:cover;
  }
}


.workshop-backdrop {
  position:relative;isolation:isolate;overflow:hidden;
  color:#fff;background:#182329;border-radius:24px;
}
.workshop-backdrop::before {
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--photo-shade),var(--workshop-image);
  background-repeat:no-repeat;
  background-size:cover,var(--photo-size);
  background-position:center,var(--photo-position);
}
.workshop-backdrop .eyebrow {color:#f2bfa1}
.workshop-backdrop p,.workshop-backdrop .details {color:#edf0f2}
#catalogo .workshop-backdrop {
  --workshop-image:url("assets/officina-forbici-incandescenti.jpg");
  --photo-size:84% auto;
  --photo-position:right 61%;
  --photo-shade:linear-gradient(90deg,#182329 0%,rgba(24,35,41,.94) 22%,rgba(24,35,41,.79) 42%,rgba(24,35,41,.27) 63%,rgba(24,35,41,.08) 84%);
  display:block;padding:44px clamp(24px,4.5vw,64px);min-height:300px;
}
#catalogo .workshop-backdrop p {margin:18px 0 0;max-width:360px}
.contact .workshop-backdrop {
  --workshop-image:url("assets/officina-foratura.jpg");
  --photo-size:77% auto;
  --photo-position:right 43%;
  --photo-shade:linear-gradient(90deg,#182329 8%,rgba(24,35,41,.97) 39%,rgba(24,35,41,.82) 57%,rgba(24,35,41,.34) 87%,rgba(24,35,41,.23) 100%);
  padding:36px clamp(22px,3vw,42px);
}
.contact .workshop-backdrop .email {color:#fff}
.contact .workshop-backdrop .details a {color:inherit}
@media(max-width:1000px) {
  #catalogo .workshop-backdrop {
    --photo-shade:linear-gradient(90deg,#182329 0%,rgba(24,35,41,.92) 33%,rgba(24,35,41,.86) 51%,rgba(24,35,41,.30) 76%,rgba(24,35,41,.10) 100%);
  }
}
@media(max-width:680px) {
  #catalogo .workshop-backdrop,.contact .workshop-backdrop {
    --photo-size:100% auto;
    border-radius:20px;
  }
  #catalogo .workshop-backdrop {
    --photo-position:center 61%;
    --photo-shade:linear-gradient(180deg,#182329 0%,rgba(24,35,41,.88) 18%,rgba(24,35,41,.16) 59%,rgba(24,35,41,.08) 100%);
    padding:32px 24px 155px;
  }
  #catalogo .workshop-backdrop::before {
    inset:auto 0 0;height:220px;background-size:cover,max(100%, 360px) auto;
  }
  .contact .workshop-backdrop {
    --photo-position:center 55%;
    --photo-shade:linear-gradient(120deg,#182329 0%,rgba(24,35,41,.95) 42%,rgba(24,35,41,.72) 74%,rgba(24,35,41,.38) 100%);
  }
}