section.vignettes2Col{
text-align:center;
padding:100px 50px;
}

section.vignettes2Col.beige{background-color:var(--beige);}

section.vignettes2Col .intro{
width:800px;
max-width:100%;
margin:0 auto;
}

section.vignettes2Col .intro > .ti_gd + .ckeditor{padding-top:30px;}

section.vignettes2Col .liste{
display:flex;
flex-flow:row wrap;
justify-content:center;
width:1400px;
max-width:100%;
margin:0 auto;
padding-top:60px;
}

section.vignettes2Col .intro.hidden + .liste{padding-top:0;}

section.vignettes2Col .intro.hidden, section.vignettes2Col .liste.hidden{display:none;}

section.vignettes2Col > .bt{margin-top:80px;}

section.vignettes2Col > .intro.hidden + .liste.hidden + .bt{margin-top:0;}

section.vignettes2Col .liste article{
width:calc(50% - 20px);
margin:10px;
}

section.vignettes2Col .liste article .bloc{
display:flex;
flex-flow:column;
justify-content:center;
height:100%;
background-color:#000;
color:#fff;
padding:10px;
}

section.vignettes2Col .liste article .bloc > figure{
position:relative;
flex:1;
}

section.vignettes2Col .liste article .bloc > figure > img{
width:100%;
height:100%;
object-fit:cover;
}

section.vignettes2Col .liste article .bloc > figure > img:first-child{
position:relative;
z-index:5;
}

section.vignettes2Col .liste article .bloc > figure > img + img{
position:absolute;
z-index:10;
top:0;
left:0;
opacity:0;
transition:0.3s ease-in-out;
}

section.vignettes2Col .liste article .bloc:hover > figure > img + img{opacity:1;}

section.vignettes2Col .liste article .bloc .ss_ti_gd{padding:15px 10px 10px 10px;}

section.vignettes2Col.beige .liste article .bloc .ss_ti_gd{color:var(--beige);}

/********** medias **********/
@media screen and (max-width:1380px){
section.vignettes2Col{padding:50px;}

section.vignettes2Col .liste{padding-top:40px;}

section.vignettes2Col > .bt{margin-top:40px;}
}

@media screen and (max-width:980px){
section.vignettes2Col{padding:50px 10px;}

section.vignettes2Col .liste article .bloc .ss_ti_gd{padding:0 5px;}

section.vignettes2Col .liste article .bloc > figure + .ss_ti_gd{padding-top:10px;}
}

@media screen and (max-width:680px){
section.vignettes2Col{padding:40px 20px;}

section.vignettes2Col .intro > .ti_gd + .ckeditor{padding-top:10px;}

section.vignettes2Col .liste{padding-top:20px;}

section.vignettes2Col .liste article{
width:100%;
margin:10px 0;
}

section.vignettes2Col > .bt{margin-top:20px;}
}