:root{
    --main-color: rgb(31, 31, 31);
    --secondary-color: rgb(70, 70, 70);
    --background-color: rgb(219, 213, 225);
    --light-background-color: rgb(249, 237, 245);
    --font-family: 'Roboto', Arial, sans-serif;
}

.lesActus{
    display:flex;
    flex-flow: row;
    flex-wrap: wrap;
    margin:20px auto 20vh auto;
    height : auto;
    justify-content:space-between;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    
}
.actu{
    width:400px;
    height:500px;
    border-radius: 5px;
    border-width: 3px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    margin:4vh auto;
}

.photoActu{
    width:100%; 
    height:400px;
    object-fit: cover;
    object-position: 0 -110px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}
.pNews{
    color:rgb(31, 31, 31);;
    font-weight: 200;
    font-size:15px;
    text-align: center;
    line-height: 1.5;
    height: 60px;
}
.monthNews{
    color:rgb(31, 31, 31);;
    font-weight: 200;
    font-size:12px;
    text-align: center;
    align-items: center;
    padding-top: 10px;
    height:40px;
}

@media only all and (min-width:321px) and (max-width:539px){
    .actu{
        width:330px;
        height:450px;
        border-radius: 5px;
        border-width: 3px;
        box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
        margin:4vh auto;
    }
    
    .photoActu{
        width:100%; 
        height:350px;
        object-fit: cover;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    
    }
    .pNews{
        display: flex;
        justify-content: center;
        align-items: center;
        color:rgb(31, 31, 31);;
        font-weight: 300;
        font-size:16px;
    }
    .monthNews{
        color:rgb(31, 31, 31);
        font-weight: 200;
        font-size:12px;
        text-align: center;
        align-items: center;
        padding-top: 10px;
        height:40px;
    }
    
}