#tableau-elus {}

#tableau-elus .flex-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}


#tableau-elus .flex-group .item-elu {}

#tableau-elus h3 {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: var(--sna-blue);

}

#tableau-elus .item-maire,
#tableau-elus .item-adjoint,
#tableau-elus .item-delegue {
  border: 1px solid var(--sna-blue-5);
  border-radius: 10px;
  background-color: #fafafa;
  flex: 0 0 calc(100%);
  margin-bottom: 2rem;

}


#tableau-elus .item-conseiller {
  flex: 0 0 calc(100%);
}

@media screen and (min-width: 576px) {
  #tableau-elus .item-conseiller {
    flex: 0 0 calc(50% - 1.5rem);
  }

}


@media screen and (min-width: 768px) {
  #tableau-elus .flex-group {
    display: flex;
    flex-wrap: wrap;

  }

  #tableau-elus .flex-group .item-elu {
    flex: 0 0 calc(50% - 1.5rem);
  }
}

#tableau-elus .picture {
  flex: 0 0 33%;
  aspect-ratio: calc(192 / 266);
  overflow: hidden;
  border-radius: 7px;
}

#tableau-elus .picture img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

#tableau-elus .fonction {
  font-size: 0.9rem;
  color: var(--sna-blue-5);
  font-weight: bold;
}

#tableau-elus .nom {
  font-size: 1.6rem;
  color: var(--sna-blue);
  margin: 0.5rem 0;
  padding: 0;
}

#tableau-elus .item-conseiller .nom {
  font-size: 1.3rem;
  margin: 0.2rem 0;

}



#tableau-elus .competences {
  font-style: italic;
  color: #666;


}