.gallery ul{
list-style:none;
}

/* Type 1 */
.gallery.compact ul{
float:left;
width:100%;
margin:0;
padding:0;
}

.gallery.compact li{
float:left;
width:100%;
margin:0;
padding:0;
}

.gallery.compact li:before{
display:none
}

.gallery.compact li.none{
display:none
}

.gallery.compact{
float:left;
width:100%;
position:relative;
margin:0;
padding:0;
}

.gallery.compact .media{
display:block;
margin:0;
padding:0;
}

.gallery.compact .amount{
position:absolute;
left:.5rem;
top:.5rem;
margin:0;
padding:0 .5rem;
border-radius:.25rem;
}

.gallery.compact .amount p{
margin:0;
padding:0;
font-size:var(--fs-m);
color:var(--clr-primary-300);
}

.gallery.compact .amount p:before{
display:inline-block;
content:'';
height:.95rem;
width:1em;
background:url('/assets/img/lightbox/amount.svg') no-repeat bottom left;
}

.gallery.compact .amount{
background:var(--bgr-accent-400);
}




/* Type 2 */
.gallery.listing ul{
display:flex;
justify-content:flex-start;
align-items:flex-start;
flex-wrap:wrap;
margin:0;
padding:0;
}

.gallery.listing li{
margin:0;
padding:0;
width:calc(100% / 6);
}

.gallery.listing li:before{
display:none
}

.gallery.listing li picture{
margin:0;
padding:0;
border:var(--brd-gray-500) 1px solid;
background:var(--bgr-gray-500);
}


/* Type 3 */
.gallery.leporello ul{
display:flex;
flex-direction:column;
width:100%;
margin:0;
padding:0;
border-radius:1.25rem;
border:var(--brd-gray-500) 1px solid;
overflow:hidden;
}

/* Mobile View */
@media screen and (max-width: 45rem){

.gallery.leporello ul{
height:28rem;
}

}

/* Tablet View */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

.gallery.leporello ul{
height:42rem;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.gallery.leporello ul{
height:46rem;
}

}


.gallery.leporello li{
display:flex;
justify-content:center;
align-items:center;
margin:0;
padding:0;
overflow:hidden;
transition:450ms ease-in-out ;
flex:100%;
position:relative;
background:var(--bgr-accent-400);
}

.gallery.leporello li:before{
display:none
}

.gallery.leporello li picture{
display:block;
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
transition:350ms ease-in-out;
transform:scale(1.4);
filter:brightness(85%) saturate(110%);
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}

.gallery.leporello li picture img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
}

.gallery.leporello li:hover{
flex:80%;
}

.gallery.leporello li:hover picture{
position:absolute;
top:0;
left:0;
transform:scale(1.1);
}

.gallery.leporello li:hover picture img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 80%;
}

.gallery.leporello:has(li:hover) li:not(:hover){
flex:20%;
filter:brightness(65%) saturate(110%);
}

.gallery.leporello li figcaption.legend{
position:absolute;
bottom:5%;
left:0;
text-align:center;
width:100%;
transition:bottom 350ms ease-out;
transition-delay: 100ms;
}

.gallery.leporello li:hover figcaption.legend{
position:absolute;
bottom:2%;
left:0;
}

.gallery.leporello li figcaption.legend > *{
color:var(--clr-accent-300);
}


.gallery.leporello li:hover figcaption.legend > *{
color:var(--clr-primary-100);
}

.gallery.leporello:has(li:hover) li:not(:hover) figcaption.legend{
position:absolute;
top:0;
left:0;
}