/* Header -------------------- */
header {
    height: auto;
    padding: 2.5rem 5rem;
    position: relative; 
}

.header--content{
    width: 100vw;
    display: flex;
    flex-direction: center;
    flex-direction: column;
    width: 60vw;
    gap: 1rem;
    margin: 10rem auto 0 auto;
}

.header--content * {text-align: center; width: -webkit-fill-available;}

.first_article {
    display: flex;    
    flex-direction: row;      
    background-color: #ECECF4;
    border-radius: 1.25rem; 
    gap:2.5rem;
    width: 80vw;
    max-width: 1200px;
    margin: 7.5rem auto 0 auto;
}

.first_article--container {display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem; flex: 1 0 0; gap: 1rem;}
.first_article--text {display: flex; flex-direction: column; justify-content: flex-start; gap: .75rem;}
.first_article--image {flex: 1 0 0; width: 50%; border-radius: 1.25rem; object-fit: cover;}

.first_article:hover {box-shadow: 0px 0px 20px 1px var(--black--40);}

header hr {border: 1px solid #9B9DA7; width: 80vw; max-width: 1200px; margin: 7.5rem auto 0 auto;}

/* Main -------------------- */
.blog--article {width: 80vw; max-width: 1200px; margin: 2.5rem auto 5rem auto; display: flex; flex-direction: column; gap : 2.5rem;}
.blog--titre{color: #6E707C; font-size: 6rem; font-weight: 400; line-height: 108px;}
.article--list {display: flex; flex-wrap: wrap; gap: 2.5rem 1.5rem;}

.article {
    display: flex;    
    flex-direction: column;      
    border-radius: 1.25rem;        
    background:  #ECECF4;
    height: -webkit-fit-content;
    flex: 1 1 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
    overflow: hidden;
}

.article:hover {box-shadow: 0px 0px 20px 1px var(--black--40);}

.article img{
    width: 100%;
    height: 20rem;
    object-fit: cover;
    border-radius: 1.25rem 1.25rem 0 0;
}

.article--content {padding: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem;}
.article--info{display: flex; flex-direction: row; gap: .5rem;}

.article--text{
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;     
    text-overflow: ellipsis;
    overflow: hidden;
}

.article h3 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;     
    text-overflow: ellipsis;
    overflow: hidden;
}

.first_article h3 {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;     
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Responsive ----------------------------------------*/
/* For-big-desktop-up */
@media (min-width: 1801px) {
    .first_article--text p {
        display: -webkit-box;
        line-clamp: 6;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;     
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
/* For-desktop-up */
@media (max-width: 1800px) {
    .first_article--text p {
        display: -webkit-box;
        line-clamp: 5;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;     
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
/* For-tablet-landscape-up */
@media (max-width: 1200px) {
    .first_article--text p {
        display: -webkit-box;
        line-clamp: 5;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;     
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
/* For-tablet-portrait-up */
@media (max-width: 900px) {
    .article {
        flex: 1 1 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
    .first_article {
        flex-direction: column-reverse; 
        gap: 0rem;
    }
    .first_article--image {width: 100%; height: 25rem; border-radius: 1.25rem 1.25rem 0 0;}
    .first_article--text p {
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;     
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
/* For-phone-only  */
@media (max-width: 600px) {
        .article {
            flex: 1 1 100%;
            max-width: 100%;
        }
}