.chitiaccompagna2 {


  background: #35392a;


  color: #fff;


  padding: 10vh 5vw;


  position: relative;


  overflow: visible;


}





.chitiaccompagna2-bg-trees {


  background: url("../svg/alberi-matita-trasparente.png") center center no-repeat;


  background-size: cover;


  position: absolute;


  padding-bottom: 50px;


  inset: 0;


  opacity: 5%;


  z-index: 1;


  pointer-events: none;


}





.chitiaccompagna2-container {


  position: relative;


  z-index: 2;


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 5vw;


  max-width: 1200px;


  min-height: 700px;


  margin: 0 auto;


  flex-wrap: nowrap;


}





.chitiaccompagna2-text {


  flex: 1;


  font-size: 1.2rem;


  line-height: 1.6;


  text-align: left;


}





.chitiaccompagna2-text h2 {


  font-family: 'Playfair Display', serif;


  font-size: 2.5rem;


  margin-bottom: 1rem;


  color: #fff;


}





.chitiaccompagna2-text .highlight {


  background: #a87344;


  padding: 0 0.2em;


  border-radius: 0.2em;


}





.chitiaccompagna2-img {


  flex: 1;


  max-width: 500px;


}





.chitiaccompagna2-img img {


  width: 100%;


  height: auto;


  border-radius: 1rem;


}





/* Fading scroll */


[data-fade] {


  opacity: 0;


  transform: translateY(40px);


  transition: all 1s ease-out;


}





[data-fade].fade-in {


  opacity: 1;


  transform: translateY(0);


}





@media (max-width: 900px) {


  .chitiaccompagna2-container {


    flex-direction: column;


    gap: 4vh;


  }





  .chitiaccompagna2-text {


    order: 3; /* testo sotto */


    text-align: left;


  }





  .chitiaccompagna2-img {


    order: 2; /* immagine in mezzo */


  }


  .chitiaccompagna2-text h2 {


    font-size: 2rem;


    font-family: 'Playfair Display', serif;


    font-weight: 600;


    text-align: left;


    line-height: 1.2;


    letter-spacing: -0.5px;


  }


}