/*
L'attribut "data-theme" est ajouté au tag body 
et l'id est spécifié par config.yaml
*/

body {
    font-family: 'eau_doucesans_regular';
}
h1 {
    font-family: 'eau_doucesans_thin';

}
#titlebar h1 {
    font-size: 4rem;
}
h2 {
    font-family: 'eau_doucesans_light';
    font-size: 2.2rem
}

.mosaique-grid {
    grid-gap: 1rem;
}

.aspectratio-34 {
    aspect-ratio: 3 / 4;
}
.aspectratio-916 {
    aspect-ratio: 9 / 16;
}

.item:hover .item-illu, #viewer-inner .item-illu:hover {
    object-fit: cover !important;
}

/* mosaique */
.item-grid {
    display: grid;
    grid-gap: 1.5rem;
    align-items: end;
}

[data-listingtype="un"] .mosaique-grid {
    grid-template-columns: 1fr;
}

[data-listingtype="un"] .item-grid {
    grid-template-columns: 3fr 2fr;
}

[data-listingtype="un"] .item-illu {
    aspect-ratio: 18 / 9;
}

[data-listingtype="un"] .item-infos {
    margin-bottom:1rem;
}

[data-listingtype="deux"] .mosaique-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 3rem;
}

[data-listingtype="deux"] .item-grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

[data-listingtype="deux"] .item-illu {
    aspect-ratio: 4 / 3;
}

[data-listingtype="trois"] .mosaique-grid {
    grid-gap: 0.5rem;
}

[data-listingtype="trois"] .item-grid {
    grid-gap: 0.5rem; 
}

[data-listingtype="trois"] .item-illu {
    aspect-ratio: 1 / 1;
}

[data-listingtype="deux"] .item-description, [data-listingtype="trois"] .item-description {
    display:none;
}

@media (min-width: 768px) {
    [data-listingtype="trois"] .mosaique-grid {
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
    }
}

@media (min-width: 992px) {
    [data-listingtype="trois"] .mosaique-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2rem;
    }
}