@media (max-width: 767.98px) {
  #panda {
    max-width: 100% !important;
    margin-top: 5vh !important;
  }
}

/* Contenitore esterno */
.flip-section {
  position: relative;
  perspective: 1200px;
  /* Aggiunge un contesto 3D ma NON tocca il flusso */
}

/* Elemento che ruota */
.flip-section-inner {
  position: relative;
  width: 100%;
  transition: transform 0.9s ease;
  transform-style: preserve-3d;
  min-height: 100%; /* Importante */
}

/* Forza la sezione ad avere l’altezza del lato visibile */
.flip-section-inner > .flip-section-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}

/* ✅ Trucco per mantenere lo spazio della sezione nel flusso */
.flip-section {
  display: block;
  min-height: 600px; /* o quanto serve per contenere entrambe le facce */
  overflow: visible;
}

/* Quando ruota */
.flip-section-inner.flipped {
  transform: rotateY(180deg);
}

/* Front e back */
.flip-front {
  transform: rotateY(0deg);
  z-index: 2;
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
  z-index: 1;
  backface-visibility: hidden;
  background: #fff;
  border-radius: 15px;
}