/* ================================
MAIN - SAMPLE
Sample of n articles
=================================*/
/* Default : n = 3 */

:root {
    --SAMPLE-HEIGHT:150px;
    --SAMPLE-IMG-HEIGHT:150px;
    --SAMPLE-TITLE-HEIGHT:0px;
}

.sample-articles {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px;
}

.sample-articles a {
    flex:calc(33% - 20px);
    display:block;
    width:100%;
    max-width:calc(33% - 20px);
    height:var(--SAMPLE-HEIGHT);
    position:relative;
    overflow:hidden;
    border-radius:var(--GC-FRAME-BORDER-RADIUS);
    border:1px solid #F0F0F0;
    box-shadow:0px 0px 0px #E0E0E0;
    transition:transform 0.3s;
}

.sample-articles a:hover {
    transform:scale(1.05,1.05);
    box-shadow:3px 3px 10px #E0E0E0;
}

.sample-articles a:active {
    box-shadow:1px 1px 1px #E0E0E0;
}

@media screen and (max-width:768px) { 
    .sample-articles a {
        flex:100%;
        max-width:unset;
    }
}

.sample-articles a img { 
    height:var(--SAMPLE-IMG-HEIGHT);
    position:absolute;
    top:0;
    left:50%; transform:translateX(-50%);
}

.sample-articles a span { 
    height:var(--SAMPLE-TITLE-HEIGHT);
    color:var(--GC-COLOR-TITLE);
    position:absolute;
    bottom:0;
    padding:5px;
    box-sizing:border-box;
}