.scroller {
	--height: calc((100vw - 32px) / 450 * 250);
	--show-arrows: true;
	margin: 2vh 0;
	position: relative;
	height: var(--height);
	max-height: 500px;
	transition: height .5s;
}
.scroll_helper {
	position: absolute;
	width: 100%;

    height: 100%;
    display: flex;
    flex-direction: column;
}
.slider {
	white-space: nowrap;
    overflow-y: clip;
    overflow-x: auto;
    height: 100%;
	width: round(down, 100%, 1px);	/* important for flex containers!!! */
    font-size: 0;

	padding: 2px;				/* +4px for focused outline width (+1px на округление?) */
	scroll-padding-inline: 2px;

    scroll-behavior: smooth;
	scroll-snap-type: x mandatory;

    container-name: slideContainer;
	container-type: inline-size scroll-state;
	
	scrollbar-width: none;   	/* Hide scrollbar for Firefox и новых версий других браузеров*/
	-ms-overflow-style: none;	/* Hide scrollbar for IE and Edge */
}
.slider::-webkit-scrollbar {	/* Hide scrollbar for Chrome, Safari and Opera */
	display: none;
}
.slider.js {
	scroll-snap-type: none;
	scroll-behavior: unset;
}
.slider.dragged .slide, .slider.dragged .slide * {
	cursor: grab;
} 
.slide {
    scroll-snap-align: start;
    display: inline-block;
    margin-right: 20px;
    font-size: 1rem;
    height: 100%;
	width: 100%;
	position: relative;
}
.slide:last-of-type {
	margin-right: 0;
}
@media (min-width: 650px) {
 .scroller {
	--height: 270px;
 }	
 .slide {
    width: calc(50% - 10px);
 }
}

.pane {
    overflow: clip;
	padding: 10px 10px 15px;
	border: 1px solid var(--color-light-blue);
	border-radius: var(--border-radius-pane);
	background: #fff;
}
.pane {
	width: 100%;
	height: calc(var(--height) - 9px);
    position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transform: translateY(calc(-50% - 4px));
	cursor: pointer;
	text-align: left;
	white-space: normal;
}
/* .pane:hover {
	box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
} */
.slide > span, .slider > img {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    pointer-events: none;
}
.slider > img {
	box-sizing: content-box;
    background: #ccc7;
    border-radius: 100%;
    padding: 10px;
	z-index: 1;
}
.slide > span:last-of-type, .slider > img:last-of-type {
	right: 10px;
	left: auto;
}
.slide > span, .slide > span > a {
    border-radius: 0 100% 100% 0;
    width: 60px;
	left: 0;
}
.slide > span:last-of-type, .slide > span:last-of-type > a {
    border-radius: 100% 0 0 100%;
    right: 0px;
}	
.slide > span > a {																/* background: #ff000033; */
	display: inline-block;
	width: 100%;
	height: 100%;
    -webkit-tap-highlight-color: transparent;
    outline: 0;
    pointer-events: all;
}	
.njs .slide > span > a:not([href]) {
	cursor: not-allowed;
}
@supports (container-type: scroll-state) {
 .slide > span > a:not([href]) {
	display: none;
 }
} 
@container slideContainer not scroll-state(scrollable: left) {
	.slider > img:first-of-type {
		display: none;
	}
}
@container slideContainer not scroll-state(scrollable: right) {
	.slider > img:last-of-type {
		display: none;
	}
}

.slide > a:active > .pane {
	border-color: var(--color-blue);
	outline: 2px solid var(--color-blue);
}
@media (min-height: 600px) {
 .slide > a:focus > .pane {
	border: 1px solid var(--color-blue);
	outline: 1px solid var(--color-blue);
 }
}
@media (min-height: 750px) {

	.scroller { 
		margin: 30px 0;
	}

}

@supports (animation-timeline: scroll()) {

 .slide > span {
	--hide_link: false;
	animation: hide_navigation_links .2s steps(1, start) backwards;
	animation-timeline: view(x 100px 100px);		/* "запас хода" для надёжного появления кнопок */
	animation-range: entry 100% exit 0%;
 }
 @keyframes hide_navigation_links {
 	from {
		--hide_link: false;
	}
	to {
		--hide_link: true;
	}
 }	
 @container style(--hide_link: true) {
	.slide > span > a {
		display: none;
	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
 
	.scroller {
		view-timeline: --scroller-tl; 
		--show-arrows: false;
		animation: show_arrows steps(1) forwards;
		animation-timeline: --scroller-tl;	/*view(100% 0%);*/
		animation-range: entry 75% exit-crossing 5%;
	}
	@keyframes show_arrows {
		from {
			--show-arrows: true;
		}
		to {
			--show-arrows: false;
		}
	}	
	.slider > img {
		opacity: 0;
		translate: -80px;
		transition: all .2s ease-out;
	}		
	.slider > img:last-of-type {
		translate: 80px;
	}	
	@container style(--show-arrows: true) {
		.slider > img {
			opacity: 1;
			translate: 0!important;
		}
	}
	
 }	
}/* -end- supports animation-timeline */

@container not style(--height:100%) {

 .njs .slider {																				/* border: 1px dotted red; */
 	animation: expand_slider .3s step-end backwards;
 }
 .njs .slider:active {
	animation: none;
 }
 @keyframes expand_slider {
	from {position: absolute; top: 50%; translate: 0 -50%; height: 100vh;}
	to { position: static; top: 0; height: 100%;}
 }

}

.pane img {
	width: 100%;
	height: auto;
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
}