/* ================================
BLOG - THUMBNAILS
=================================*/

:root {
    --THUMBNAIL-WIDTH:50%;
    --THUMBNAIL-GAP:50px;
}

main .thumbnails {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:var(--THUMBNAIL-GAP);
    margin:0 0 50px 0;
}

main .thumbnails article {
    position:relative;
    height:300px;
    flex:calc(var(--THUMBNAIL-WIDTH) - var(--THUMBNAIL-GAP));
    max-width:calc(var(--THUMBNAIL-WIDTH) - var(--THUMBNAIL-GAP));
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
    border:1px solid #F0F0F0;
    box-shadow:0px 0px 0px #E0E0E0;
    overflow:hidden;
}
@media screen and (max-width:768px) { 
    main .thumbnails article {
        flex:100%;
        max-width:unset;
    }
}


main .thumbnails article > a.article {
    box-sizing:border-box;
    padding:0px;
    position:relative;
    display:block;
    width:100%; height:100%;
}

main .thumbnails article a.article img {
    width:100%; height:300px;
    object-fit:cover;
    position:absolute;
}

main .thumbnails article a.article h2 {
    background-color:#FFFFFFD0;
    position:absolute;
    padding:5px 10px; box-sizing:border-box;
    top:150px; left:0;
    text-align:left;
    line-height:1em;
    width:100%; height:65px;
    overflow:hidden;
    font-weight:bold;
    font-size:100%;
    text-transform:uppercase;
}

main .thumbnails article a.article .chapeau {
    background-color:#FFFFFFD0;
    color:var(--GC-COLOR-TEXT);
    position:absolute;
    top:243px; left:0;
    text-align:justify;
    width:100%; height:3.6em;
    box-sizing:border-box;
    padding:0 10px;
    overflow:hidden;
}

main .thumbnails article a.article .ellipsis {
    background-color:var(--GC-COLOR-BACKGROUND);
    display:block;
    position:absolute;
    width:max-content;
    top:277px; right:10px;
    padding-left:5px;
}
main .thumbnails article a.article .ellipsis::before { 
    content:"..."
}

main .thumbnails article a.category {
    background-color:var(--GC-COLOR2);
    color:var(--GC-COLOR-BACKGROUND);
    display:block;
    font-size:90%;
    width:150px;
    padding:2px 10px;
    text-align:center;
    position:absolute;
    border:1px solid var(--GC-COLOR-BACKGROUND);
    border-bottom-left-radius:var(--GC-FRAME-BORDER-RADIUS);
    border-bottom-right-radius:var(--GC-FRAME-BORDER-RADIUS);
    top:0; left:50%; transform:translateX(-50%);
}


/* --------------------------------*/
/* Sélection d'une catégorie       */

main .categories {
    width:100%;
    margin-bottom:40px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap-reverse;
    justify-content:flex-end;
    border-bottom:1px solid var(--GC-COLOR1);
}

main .categories a {
    color:var(--GC-COLOR1);
    margin:2px 0 0 5px;
    width:max-content;
    padding:2px 10px;
    border-top-left-radius:0.5em;
    border-top-right-radius:0.5em;
}

main .categories a.on {
    background-color:var(--GC-COLOR2);
    color:var(--GC-COLOR-BACKGROUND);
}

/* ----------------------------------- */
/* Bouton de chargement complémentaire */

main .thumbnails .addButton {
    display:block;
    background-color:var(--GC-COLOR1);
    color:var(--GC-COLOR-BACKGROUND);
    width:250px;
    margin:0 auto;
}