/* griglia giustificata di foto e video: ogni elemento cresce in proporzione al suo rapporto --r
   (larghezza / altezza), così le righe hanno altezza uniforme e niente viene ritagliato */
.gallery{
    --h:260px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.gallery::after{
    /* l'ultima riga non viene stirata */
    content:"";
    flex-grow:1000000;
}
.gallery > *{
    flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--h));
    min-width:0;
    aspect-ratio:var(--r);
    overflow:hidden;
    border-radius:4px;
}
.gallery > .vuota{
    flex-basis:100%;
    aspect-ratio:auto;
}

.pagination{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px;
    margin-top:3%;
    margin-bottom:3%;
}
.pagination a{
    min-width:2.5rem;
    padding:8px 12px;
    border-radius:1rem;
    text-align:center;
    text-decoration:none;
    color:var(--color-on-bg);
    background:#313131;
    transition:background 300ms ease-in-out;
}
.pagination a:hover{
    background:#424242;
}
.pagination .selected{
    background:#537992;
}

@media(max-width:600px){
    .gallery{
        --h:160px;
        gap:4px;
    }
}