.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('../../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;
            }
        }


}