/* container */

.slides
{
	display:flex;
  overflow-x:scroll;
  overflow-y:hidden;
  overscroll-behavior-x:contain;

	scroll-snap-type: x mandatory;
	scroll-padding-left:var(--section-label);
	scroll-behavior: smooth;
	
	aspect-ratio:16/9;
}
.slides.scroll-to
{
	scroll-snap-type:none;
	scroll-behavior: auto;
}
.slides.dragging
{
	cursor:grabbing !important;
}
.slides.dragging .slide
{
	pointer-events:none;
}
.slides.no-snap
{
	scroll-snap-type:none !important;
}
.slides.no-smooth
{
	scroll-behavior:auto !important;
}
.slides:has(.single)
{
	overflow:hidden;
}

/* slides */

.slides .slide
{
	display:block;

	width:100%;
	
	max-height:100%;
	flex-shrink:0;
	
	scroll-snap-align:start;
}
.slides .slide img
{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.slides .slide.single img
{
	width:auto;
	max-width:100%;
}
.slides overscroll
{
	width:15%;
	flex-shrink:0;
}

/* navigation */

.slides + .navigation
{
	position:absolute;
	left:50%;
	bottom:12px;
	transform:translateX(-50%);
	display:flex;
}
.slides + .navigation .dot
{
	margin:0 5px;
	width:30px;
	height:5px;
	background-color:white;
	cursor:pointer;
}
.slides + .navigation .dot.active
{
	background-color:black;
}