.conseillers_cat {
    padding:10px;
    background-color:#fafafa;
    border-radius:5px;
    margin:10px 0;
}

h2 {
    text-align:center;
}
.conseillers_cat h2 {
    color:#444;
    text-align:left;
    margin-bottom:10px;
}

.conseillers_liste {
  display:flex;
  margin-bottom:10px;
  width:100%;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:15px;
  align-items: flex-start;
}
.conseiller {
    width:25%;
    display:flex;
    flex-direction:column;
    gap:0;
}

.maire {
    width:50%;
    display:flex;
    flex-direction:column;
    gap:0;
}

.conseiller_photo {
    background-color:#bbb;
    width:180px;
    height:220px;

    
    
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

    border-radius: 5px;
    
    position:relative;
    margin:auto;
    margin-bottom:10px;
}

.maire .conseiller_photo {
    height:350px;
    width:280px;
}

.conseiller_info {
    /*background-color:rgba(147,191,28,0.8);*/
    background-color:rgba(147,147,147,0.7);
    padding:10px;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
}

.conseiller_titre {
    text-align:center;
    margin:5px auto;
    font-weight:600;
    color: var(--red-base);
}
.conseiller_role {
    text-align:center;
    color:#555;
    font-size:1.25rem;
    margin:0 auto 2px auto;
    line-height: normal;
}
.conseiller_subrole {
    text-align:center;
    color:#666;
    font-size:1.20rem;
}
.conseiller_president {
    /*font-weight:600;*/
}

.conseiller_commission {
    text-align:center;
    color:#888;
    font-size:1.2rem;
}

.commission-elus {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:20px;
}

.commission-elus div {

}
.commission-elus div::after {
    content: ',';
}
.commission-elus div:last-of-type::after {
    content: '';
}


@media (max-width: 700px) {
  .conseiller {
    width:100%;
  }
  
  .maire {
    width:100%;
  }
  
 

}