/* ====================
    UNE
====================== */

.une-wrapper{
    width:320px;
    margin:40px auto;
    text-align:center;
}

.une-image{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:320px;
    padding:10px;
    background:#fff;
    border:1px solid var(--ecox-border-color);
    border-radius: var(--ecox-content-border-radius);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    overflow:hidden;
    text-decoration:none;
    transition:
            transform .3s ease,
            box-shadow .3s ease;
}

.une-image img{
    width:95%;
    height:95%;
    object-fit:contain;
    display:block;
    transition:transform .3s ease;
}

.une-image:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 60px rgba(0,0,0,.16);
}

.une-image:hover img{
    transform:scale(1.03);
}

.une-date {
    margin-top:18px;
}

.une-date::before{
    content:"";
    display:block;
    width:40px;
    height:1px;
    background:var(--ecox-bleu);
    margin:0 auto 12px;
}

.une-date a{
    font-size:.85rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#8a8f95;
    text-decoration: none!important;
}
.une-wrapper:hover .une-date a{
    color: var(--ecox-rouge);
}


/* ====================
    GRID
====================== */
.letters-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:35px;
}

.letter-card{
    display:block;
    text-align:center;
    text-decoration:none!important;
    color:inherit;
}

.letter-image{
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:8px;
    border:1px solid var(--ecox-border-color);
    border-radius: var(--ecox-content-border-radius);
    overflow:hidden;
    transition:
            box-shadow .3s ease,
            transform .3s ease;
}

.letter-image img{
    width:95%;
    height:95%;
    object-fit:contain;
    display:block;
    transition:transform .3s ease;
}

.letter-date{
    margin-top:18px;
    font-size:.85rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#777;
}

.letter-card:hover .letter-image{
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.letter-card:hover .letter-image img{
    transform:scale(1.04);
}

.letter-card:hover .letter-date{
    color:var(--ecox-rouge);
}


/* TABLETTE */
@media(max-width:1200px){
    .letters-grid{
        grid-template-columns:repeat(4,1fr);
    }
}


/* MOBILE */
@media(max-width:767px){
    .letters-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .letter-date{
        font-size:.75rem;
    }
}