#modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny {
position:absolute;
height:99%;
width:100%;
opacity:0;
visibility:hidden;
z-index:1;
&.four {
z-index:0;
opacity:1;
visibility:visible;
transition: all 0.1s ease;
+ .content {
z-index:1;
}
&.out {
opacity:0;
visibility:hidden;
}
}
.modal {
background: var(--blanc);
position: absolute;
height:99%;
width:100%;
display:flex;
flex-direction: column;
align-items: center;
margin: 10px 0;
& button{
width:240px;
}
}
}
.modale__content{
display:flex;
padding:50px;
gap:50px;
height:100%;
}
.modale__left{
width:30%;
display: flex;
flex-direction: column;
align-items: center;
gap:20px;
& card__name{
width:80%;
}
& .card__socials{
display:flex;
gap: 5px;
padding: 20px 0;
}
& img{
width:100%;
}
& 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: 'PoppinsMedium';
padding: 0;
margin: 0;
color: var(--noir);
font-size: 1rem;
line-height:1.2;
text-align:center;
}
}
.modale__right{
width:70%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap:20px;
.card__citation{
font-family:'PoppinsLight';
}
& p{
font-size:0.9rem;
margin:0;
}
}
@media screen and (max-width:1280px){
.modale__content{
padding: 50px 20px 30px;
& .modale__left{
width:25%;
}
& .modale__right{
width:75%;
}
}
}
@media screen and (max-width:1024px){
#modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny{
& .modal{
justify-content: space-around;
height:100%;
}
}
.modale__content{
padding: 50px 20px 30px;
& .modale__left{
width:25%;
}
& .modale__right{
width:75%;
}
}
}
@media screen and (max-width:768px){
#modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny{
& .modal{
justify-content: flex-start;
}
}
.modale__content{
flex-direction: column;
padding:30px;
& .modale__left{
width:100%;
gap:10px;
& img{
max-width:130px;
}
}
& .modale__right{
width:100%;
align-items: center;
}
}
}
@media screen and (max-width:480px){
#modal-container-julien, #modal-container-remi, #modal-container-claire, #modal-container-fanny{
& .modal{
justify-content: space-between;
}
}
.modale__content{
padding:20px;
gap:30px;
& .modale__left{
& h3{
line-height:1;
font-size:1.2rem;}
& h5{
line-height:1;
font-size:0.9rem;
}
& .card__socials{
padding:0;}}
& .modale__right{
& p{
font-size:0.8rem;}}
}
}