.equipe{
display: flex;
flex-direction: column;
align-items: center;
& h2{
font-family: 'PoppinsBlack';
padding: 10px 0;
margin: 0;
width: 80%;
color: var(--orange);
font-size: 2.5rem;
}
}
.equipe__container{
width:80%;
display:flex;
flex-wrap:wrap;
gap:20px;
position:relative;
}
.equipe__card{
display:flex;
background-color:var(--blanc);
width: 45%;
padding: 20px;
gap: 20px;
margin: 10px 0;
}
.equipe__card__left{
width:50%;
display: flex;
flex-direction: column;
align-items: center;
gap:30px;
& img{
width:100%;
max-width:260px;
}
& h3{
font-family: 'PoppinsExtraBold';
padding: 0;
margin: 0;
color: var(--noir);
font-size: 1.4rem;
line-height:1.2;
text-align:center;
}
& h5{
font-family: 'PoppinsRegular';
padding: 0;
margin: 0;
color: var(--noir);
font-size: 1.2rem;
line-height:1.2;
text-align:center;
}
}
.equipe__card__right{
width:50%;
display: flex;
flex-direction: column;
align-items: center;
.card__citation{
font-family:'PoppinsLight';
}
}
.card__person{
display: flex;
flex-direction: column;
gap:15px;
height: 100%;
align-items: center;
}
.card__socials{
& img{
width:30px;
height:30px;
}
}
.card__name{
display: flex;
flex-direction: column;
align-items: center;
}
.equipe__button{
background:none;
border: 1px solid var(--noir);
padding:15px;
margin:10px 0;
border-radius:50px;
font-family: 'PoppinsMedium';
color: var(--noir);
font-size: 16px;
width:180px;
transition: all 0.2s ease;
display:none;
}
.equipe__button:hover, .equipe__button:focus{
background:white;
border:1px solid white;
font-family:'PoppinsExtraBold';
color:var(--orange);
cursor:pointer;
box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
transition:all 0.2s ease;
}
.equipe__button:active{
background:var(--orange);
border:1px solid var(--orange);
font-family:'PoppinsExtraBold';
color:white;
cursor:pointer;
transition:all 0.2s ease;
box-shadow:none;
} @media screen and (max-width:1280px){
.equipe__card{
width:43%;
& p{
font-size:0.9rem;
}
}
.equipe__card__left{
justify-content: flex-start;
gap:30px;
}
}
@media screen and (max-width:1024px){
.equipe__card{
width:41%;
gap:10px;
flex-direction: column;
& p{
font-size:0.9rem;}
}
.equipe__card__left{
gap:15px;
width:100%;
& img{
max-width:150px;}
& h3{
font-size:1.2rem;}
& h5{
font-size:1rem;}
}
.equipe__card__right{
width:100%;
height:100%;
& p{
margin: 5px 0;}
}
.equipe__button{
font-size:0.8rem;
}
.card__person{
gap:10px;
}
}
@media screen and (max-width:768px){
.equipe__container{
gap:10px;
}
.equipe__card{
width:100%;
}
.equipe__card__left{
flex-direction: row;
& img{
max-width:130px;}
}
.equipe__button{
padding: 12Px;
margin: 20px 0 10px 0;
}
.card__person{
justify-content: center;
}
}
@media screen and (max-width:480px){
.equipe__container{
gap:0;}
.card__name{
gap:3px;}
.equipe__card__left{
flex-direction: row;
& h3{
line-height:1;}
& h5{
line-height:1;}
& img{
max-width:130px;}
}
.equipe__button{
width:180px !important;
}
.modale__right{
align-items:center;
}
}