.scroll-x{
    margin:2lh auto;
    padding-block:0!important;
    width: 100%;
    scrollbar-width:0;
    scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0)}

.scroll-x::-webkit-scrollbar{
    width:0;
    height:0}

.scroll-x :is(::-webkit-scrollbar-track,::-webkit-scrollbar-thumb){background:rgba(0,0,0,0)}
button:has(img){all: unset}

@media(hover:hover){button:has(img):hover{filter: brightness(1.1)!important}}

.scroll-x img{
    aspect-ratio: 1;
    object-fit: cover;
}

.scroll-x.scroll-snap>*{
    flex: 0 0 min(34vw,21ch);
    @media(min-width:calc(100ch + 2em)){flex: 1 1 20%}
}

.slideshow{
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: unset;
    height: 100dvh;
    max-height: unset;
    background-color: rgba(0,0,0,1);
    border-radius: 0;
}

.slideshow[open]{display: flex}
            
.slideshow::backdrop{
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
}

.slideshow .scroll-x.scroll-snap {
    scroll-behavior: smooth;
    padding-inline: 10vmin;
    @media(min-width:calc(62ch + 2em)){padding-inline: calc((100vw - 62ch)/2)}
}
            
.slideshow .scroll-x.scroll-snap>*{flex: 0 0 75vmin}
            
.slideshow figure img{
    aspect-ratio: 1;
    width: 100vmin}

:is(.sda,.sda-pf) .slideshow figure img{
    object-position: 100%;
    animation: slide linear both;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;}

@keyframes slide{
    0%{opacity: .3}
    50%{opacity: 1}
    100%{
        opacity: .3;
        object-position:0%;
    }
}

.slideshow figcaption{color: #fff}

:is(.sda,.sda-pf) .slideshow figcaption{
    animation: caption linear both;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;
}

@keyframes caption{
    20%,80%{opacity: 0}
    50%{opacity: 1}
}

/*ARROWS*/
.slideshow button{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgba(0,0,0,0);
    margin: 0;
    padding-inline:.236em;
    width: var(--h1);
    height: var(--h1);
    font-family: 'roboto flex',roboto,system-ui;
    color: #fff;
    transition: all .5s linear;
    position: absolute;
    z-index: 99;
}

.x-scroll-button{
    top: calc((100dvh - var(--h1) - 1em));
    width: fit-content;
    @media(orientation:landscape){top: calc((100dvh - var(--h1))/2)}
}

.x-scroll-button .arrow{width: 2.618em}
.x-scroll-button.prev{left: 1em}
.x-scroll-button.next{right: 1em}

@media(min-aspect-ratio:1/1){
    .x-scroll-button .arrow{filter:drop-shadow(.146em .236em .382em #000)drop-shadow(.236em .382em .618em #000)}
    .x-scroll-button.prev{left: 0}
    .x-scroll-button.next{right: 0}
}

.scroll-x.scroll-snap:has(li:first-of-type.visible) ~ .x-scroll-button.prev,
.scroll-x.scroll-snap:has(li:last-of-type.visible) ~ .x-scroll-button.next{
    opacity: 0;
    pointer-events: none
}

.slideshow .close{
    top: 0;
    right: 0;
    margin:0;
}