.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9999;
}

.modal{
  display: flex;
  flex-direction: column;
  background:#fff;
  border-radius:16px;
  padding:48px;
  width:100%;
  max-width:350px;
  transform: translateY(18px) scale(.98);
  transition: transform .25s ease;
  position: relative;
}

.modal-overlay.active{
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.active .modal{
  transform: translateY(0) scale(1);
}

.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
}

.open-modal-btn{
  margin: 12px 0px 48px 0px;
  background: none;
  border: solid 1px black;
  color: black;
  cursor: pointer;
  font-weight: 300;
}

.contatto-modal-img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 24px;
}

.image-wrapper-contatti {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;   /* scegli il ratio */
  border-radius: 6px;
  margin-bottom: 24px;
}

.presidente-img {
    background-image: url('images/contatto-presidente.jpg');
    background-size: cover;       /* Copre tutto il div mantenendo le proporzioni */
    background-position: center;  /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
}

.vicepresidente-img {
    background-image: url('images/contatto-vicepresidente.jpg');
    background-size: cover;       /* Copre tutto il div mantenendo le proporzioni */
    background-position: center;  /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
}

.portavoce-img {
    background-image: url('images/portavoce-emma-uberti.jpg');
    background-size: cover;       /* Copre tutto il div mantenendo le proporzioni */
    background-position: center;  /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
}

.consiglio-img {
    background-image: url('images/contatto-presidente.jpg');
    background-size: cover;       /* Copre tutto il div mantenendo le proporzioni */
    background-position: center;  /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
}

.funzioni-img {
    background-image: url('images/contatto-presidente.jpg');
    background-size: cover;       /* Copre tutto il div mantenendo le proporzioni */
    background-position: center;  /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita la ripetizione */
}

@media (max-width: 768px) {
    .modal {
        max-width: 80%;
        padding: 24px;
    }
}