.projet__link{
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.projet__box{
width:32%;
position:relative;
aspect-ratio: 1/1;
& img{
aspect-ratio: 1/1;
width: 100%;
height:100%;
object-fit: cover;
}
& a{
text-decoration: none;
}
}
.projet__box__image{
position:relative;
aspect-ratio: 1/1;
width: 100%;
height: 100%;
}
.projet__box__image::before{
content: url(//les-beaux-jours.fr/wp-content/themes/les-beaux-jours_V2/assets/images/overlay.svg);
height: 100%;
width: 100%;
position: absolute;
}
.projet__box__content{
position: absolute;
top: 0;
height: 100%;
display:flex;
flex-direction: column;
justify-content: space-between;
& h3{
color:white;
margin: 20px;
line-height: 1.2;
font-size: 1.6vw;
font-family: 'PoppinsBold';
}
& p{
margin: 0 20px 20px 20px;
font-size:1.1rem;
line-height:1;
}
& h4{
font-family:'PoppinsSemiBold';
color:white;
margin:0 20px;
line-height: 1.1;
font-size:1.1rem;
}
}
.projet__box__content__tags{
display:flex;
flex-direction: column;
gap:5px;
}
.projet__box__details{
opacity: 0;
display:flex;
flex-direction: column;
justify-content: space-between;
background-color:var(--violet);
position: absolute;
top: 0;
height: 100%;
transition: all .1s linear;
z-index:2;
& p{
font-family:'PoppinsMedium';
font-size:0.9vw;
line-height:1.2;
margin: 20px 20px 0 20px;
}
}
.terms-color{
color: var(--blanc);
}
.projet__box:hover .projet__box__details, .projet__box:active .projet__box__details, .projet__box:focus .projet__box__details {
opacity:1;
transition: all .1s ease-in;
}
#projet__template__button{
margin:20px;
& button{
margin:0;
padding:15px;
}
}
@media screen and (max-width:1280px){
.projet__box__content{
& h3{
font-size:1.8vw;
margin: 15px;
}
& h4{
font-size:0.9rem;
margin: 0 15px;
}
& p{
margin:0 15px 15px 15px;
font-size:0.9rem;
}
}
.projet__box__details{
& p{
margin: 15px 15px 10px 15px;
}
}
#projet__template__button{
margin: 0 15px 10px 15px;
& button{
font-size:0.7rem !important;
padding:13px;
}
}
}
@media screen and (max-width:1024px){
.projet__box__details {
display:none;
}
.projet__box__container{
flex-wrap:wrap !important;
}
.projet__box__content{
& h3{
font-size:2.5vw;
}
}
.projet__box__details{
& p{
font-size:1.5vw;        
}
}
.projet__box{
width:48%;
}
#projet__template__button{
& button{
padding:15px;
}
}
}
@media screen and (max-width:768px){
.projet__box{
width:100%;
}
.projet__box__content{
& h3{
font-size:4vw;
}
}
.projet__box__details{
& p{
font-size:3vw;
}
}
#projet__template__button{
margin: 0 20px 10px 20px;
& button{
font-size:1rem !important;
}
}
}
@media screen and (max-width:480px){
#projet__template__button {
& button {
font-size: 0.8rem !important;
}
}
.projet__box__content{
& h3{
font-size:5vw;
}
}
}