.ressources__body header, .ressources__body .header, .ressources__body .menu-overlay{
background-color:var(--bleu);
}
.ressources__page__header{
display:flex;
flex-direction: column;
align-items: center;
padding:30px 0;
& h1{
width:80%;
font-family: 'PoppinsBlack';
padding:5px 0;
margin: 0;
color: var(--bleu);
font-size: 2.5rem;
line-height:1.1;
}
& p{
width:80%;
font-size:1.2rem;
}
}
.ressources__container{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
& hr{
width: 80%;
color: var(--bleu);
border: 0.5px solid var(--bleu);
}
}
.ressource__item{
display:flex;
width:80%;
margin: 30px 0;
gap: 20px;
}
.ressource__titles{
& h3{
font-size: 1.4rem;
font-family:'PoppinsBold';
padding: 0;
margin:0;
line-height:1;
color:var(--bleu);
text-align:left;
}
& p{
font-size:1rem;
text-align:left;
margin:0;
padding:5px 0;
}
& h5{
font-size: 1rem;
font-family:'PoppinsMedium';
padding: 5px 0;
margin:0;
line-height:1;
color:var(--noir);
text-align:left;
}
}
.ressource__image{
background-color:var(--orange);
height:100%;
width:35%;
display: flex;
justify-content: center;
align-items: end;
aspect-ratio: 1/1;
& img{
object-fit: cover;
width: 100%;
aspect-ratio: 1/1;
max-width: 480px;
}
}
.ressource__item__content{
width:65%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap:10px;
& a{
width:100%;
}
}
#ressources__button{
max-width:300px;
& button{
padding:15px;
transition: all 0.2s;
margin:0;
}
}
@media screen and (max-width:1024px){
.ressource__item{
width:80%;
}
.ressource__titles{
& p{
font-size:0.9rem;
}
}
#ressources__button{
max-width:250px;
& button{
margin:0;
}
}
}
@media screen and (max-width:768px){
.ressource__item{
flex-direction: column;
}
.ressource__image{
width:100%;
& img{
max-width:none;
}
}
.ressource__item__content{
width:100%;
& p{
padding: 5px 0;
}
& .date{
padding:0;
}
}
#ressources__button{
max-width:100%;
& button{
margin:10px 0 0 0;
}
}
.ressources__page__header{
padding: 30px 0 0px 0;
& p{
font-size:0.9rem;
}
}
}
@media screen and (max-width:480px){
.ressources__page__header{
& h1{
font-size:2rem;
}
}
}