*,
*::before,
*::after { box-sizing: border-box; }

 html, body {
  margin: 0;
  padding: 0;
  height: auto;
  scroll-behavior: smooth;
  overflow-x: hidden; 
}
h1{text-transform: uppercase; font-size: 2.6em}
.container-flex {
  width: 100%;
  display: flex;
  height: auto;   /* opzionale: per farli alti come la viewport */
}

.item50 {
  width: 50vw;
  min-width: 0;  
}

.bgdark{background-color: #000; color: #fff; padding-bottom: 20px}
.bglight{background-color: #fff; color: #000; text-align: center;}

.item50.bglight{
  height: 100vh;          /* 👈 fondamentale per vedere lo sticky */
  display: block;         /* non serve flex qui */
  /* niente overflow qui */
}

#box-arredamenti{opacity: 0}
#intro-arredamenti{position:fixed; top: 20vh; }
#intro-arredamenti div {margin-left: auto; margin-right: auto; font-size: 1.4em; max-width: 70%; text-align: left;}
#arrow{display: none}

.item50.bgdark{
  overflow: visible;            
}

.grid{
  position: relative;
  width: 100%;        /* 👈 fondamentale in un layout flex */
  box-sizing: border-box;
  padding: 12px;      /* opzionale */
}
.grid-sizer   { width: 31%; }
.gutter-sizer { width: 3.5%; }
.grid-item    { width: 31%; margin-bottom: 3.5%; }
.grid-item img{ display:block; width:100%; height:auto; border-radius:0; opacity:0.7;
 -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out;
       }
.grid-item:hover img{ opacity:1;
 -webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
      -ms-transition: all 0.6s ease-in-out;
      transition: all 0.6s ease-in-out; }

.caption{color: #fff}

.grid-item.off-0 { margin-top: 0; }
.grid-item.off-1 { margin-top: 24px; }
.grid-item.off-2 { margin-top: 58px; }
.grid-item.off-3 { margin-top: 96px; }
.grid-item.off-4 { margin-top: 36px; }
.grid-item.off-5 { margin-top: 14px; }
.grid-item.off-6 { margin-top: 58px; }
.grid-item.off-7 { margin-top: 82px; }

@media (max-width: 1200px) {

   .grid-sizer   { width: 47%; }   /* 2 colonne */
  .gutter-sizer { width: 6%; }    /* spazio tra le due */
  .grid-item    { width: 47%; margin-bottom: 6%; }
}



@media (max-width: 991px) {
  .container-flex { flex-direction: column; height: auto; }
  .item50 { flex: 0 0 auto; width: 100%; min-height: auto; }
  .item50.bglight{ min-height: auto; height:auto }
  

  #intro-arredamenti div {font-size: 1.4em; max-width: 70%;}
  .bglight {order:1; padding-top:180px; padding-bottom: 120px}
  .bgdark {order:2 }

  #intro-arredamenti{position:relative; top:0; margin-top:40px; margin-bottom:40px; opacity:1 }
  #box-arredamenti{opacity: 0}
  #arrow{display:block;}
  #arrow svg {width: 40px; height: auto; fill: #333}

.grid-sizer   { width: 31%; }
.gutter-sizer { width: 3.5%; }
.grid-item    { width: 31%; margin-bottom: 3.5%; }
  
}


@media (max-width: 556px) {
  
  #intro-arredamenti div  {font-size: 1.2em;}
  .bglight {order:1; padding-top:120px; }

   .grid-sizer   { width: 47%; }   /* 2 colonne */
  .gutter-sizer { width: 6%; }    /* spazio tra le due */
  .grid-item    { width: 47%; margin-bottom: 6%; }

}

@media (max-width: 400px) {
  #intro-arredamenti div  {max-width: 86%;}
  
  .grid-sizer,
  .grid-item { width: 100%; }
  .gutter-sizer { width: 0; }
}