/* VISUALIZZAZIONE DA LAPTOP */
.page {
  display: grid;
  grid-template-columns: 250px 1fr; /* Due colonne: una per la sezione piante, l'altra per il contenuto principale */
  margin-top: 74px;
  height: 600px;
}

.piante {
  background-color: rgba(245, 243, 243, 0.841);
  border: 5px solid rgb(133, 167, 104);
}
.piante-tab {
  background-color: rgba(245, 243, 243, 0.841);
  border: 5px solid rgb(133, 167, 104);
}

.mappa {
  min-width: 1000px;
  margin-left: 140px;
  margin-top: 50px;
  margin-right: 140px;
  display: flex;
  vertical-align: center;
  border: 10px solid rgb(133, 167, 104);
}

.foto-mappa {
  width: 100%;
}

.sentieri {
  display: grid;
  grid-template-columns: 400px 1fr 400px;
  flex-direction: row;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 50px;
}

.artistico {
  background-color: rgba(245, 243, 243, 0.716);
  width: 100%;
  border: 10px solid rgb(133, 167, 104);
}

.immagine-artistica {
  width: 100%;
}

.bottom-artistica {
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 20px;
  height: 50px;
  margin-top: -5px;
  background-color: rgba(232, 227, 227, 0.693);
  display: flex;
  align-items: center;
  border: 10px solid rgb(133, 167, 104);
}

.bottom-scientifica {
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 20px;
  height: 50px;
  margin-top: -5px;
  background-color: rgba(232, 227, 227, 0.692);
  display: flex;
  align-items: center;
  border: 10px solid rgb(133, 167, 104);
}

.pagina {
  margin-bottom: 50px;
}
.txt-art{
  color: darkgreen;
  margin: 10px;
  text-align: justify;
}

/* VISUALIZZAZIONE DA MOBILE VERTICALE */
@media (max-width: 800px) {
  .page {
    display: block; /* Usa un layout block (o flex) invece di grid per il mobile */
    margin-top: 29.6px;
    height: auto;
  }

  /* Nascondi la sezione piante su mobile */
  .piante {
    display: none;
  }

  .mappa {
    max-width: 100%;
    min-width: 400px;
    margin-left: 0; /* Margine ridotto per adattarsi allo schermo */
    margin-top: 50px;
    margin-right: 0;
    display: flex;
    vertical-align: center;
    border: 4px solid rgb(133, 167, 104);
  }

  .foto-mappa {
    width: 100%;
  }

  .sentieri {
    display: flex; /* Usa flexbox per la disposizione dei sentieri su mobile */
    flex-direction: column;
    margin-left: 4px; /* Riduci il margine per la visualizzazione mobile */
    margin-right: 4px;
    margin-top: 20px;
  }

  .artistico {
    background-color: rgba(245, 243, 243, 0.678);
    height: 200%;
    width: 100%;
    border: 4px solid rgb(133, 167, 104);
    margin-left: -3px;
  }

  .immagine-artistica {
    width: 100%;
  }

  .bottom-artistica {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 8px;
    height: 20px;
    margin-top: -2px;
    background-color: rgba(232, 227, 227, 0.693);
    display: flex;
    align-items: center;
    border: 4px solid rgb(133, 167, 104);
  }
  .txt-art{
    margin: 4px;
  }

}