html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  scroll-behavior: smooth;
}

.container-flex {
  display: flex;
  height: 100vh;   /* opzionale: per farli alti come la viewport */
}

.item50 {
  flex: 0 0 50vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgdark{background-color: #000}
.bglight{background-color: #fff; color: #000; display: flex; align-items: center; justify-content: center}
.bglight div {font-size: 1.4em; max-width: 70%;}

.grid-6-piena {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
}

.grid-6-piena a  {color:#fff; text-decoration:none !important}
.casella {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
 /* aspect-ratio: 1 / 1; */ /* fa sì che siano quadrati, se preferisci */
  
  height: 100%;
}

.casella-label{display: flex;   align-items: center;  justify-content: center; background-color: rgba(0, 0, 0, 0.8); color: #999; text-transform: uppercase; width: 100%; height: 100%; font-size: 1.6em;
 -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;}
.casella-label:hover {background-color: rgba(0, 0, 0, 0.4); color: #fff;
 -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;}

#arrow{display: none}
#box-arredamenti{color: #000}


@media (max-width: 991px) {

  .container-flex {
    flex-direction: column;
    height: auto;           /* evita 100vh se il contenuto è più alto */
  }
  .item50 {
    flex: 0 0 auto;         /* niente base 100vw */
    width: 100%;            /* occupa tutta la riga */
    min-height: 50vh;       /* opzionale: dà “corpo” ai pannelli */
  }

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

  .casella{min-height: 300px}
  .grid-6-piena {
    grid-template-columns: repeat(2, 1fr);
  }

  #arrow{display:block;}
  #arrow svg {width: 40px; height: auto; fill: #333}

}


@media (max-width: 556px) {
  .casella{min-height: 260px}
  .bglight div {font-size: 1.2em;}
  .bglight {order:1; padding-top:120px; 
}

@media (max-width: 400px) {
  .bglight div {max-width: 86%;}
  .grid-6-piena {
    grid-template-columns: repeat(1, 1fr);
  }
  .casella{min-height: 260px}
}