.scroller {
	--height: 100%;
	--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: 480px) {
 .slide {
    width: calc(50% - 10px);
 }
}
@media (min-width: 900px) {
 .slide {
    width: calc(33.333% - 13.33px);
 }
}
@media (min-width: 1180px) {
 .slide {
    width: calc(25% - 15px);
 }
}
.pane {
    overflow: clip;
	padding: 10px 10px 15px;
	border: 1px solid var(--color-light-blue);
	border-radius: var(--border-radius-pane);
	background: #fff;
}
.pane:has(.flag) {
    overflow: visible;								/* иначе флаг не поднять выше границы */
    clip-path: inset(-2px);							/* чтобы флаг скрывался за пределами панели при анимации */
}
.scroller .pane {
	width: 100%;
	height: calc(var(--height) - 7px);
    position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transform: translateY(calc(-50% - 4px));
	
	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(-80%);
    width: 50px;
    height: 50px;
    pointer-events: none;
}
.slider > img {
    background: var(--color-blue-navigate);
    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%) {
@container style(--show-arrows:true) {
 .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 > div {
	height: 100%;
    display: flex;
    flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	font-family: "Roboto", arial, sans-serif;
	font-weight: 300;
}
.pic_holder {
    padding: 10px 20px 20px;
    overflow: hidden;
}
/* .pic_holder > picture {
	display: block;
	height: 100%;
} */	
.pic_holder > picture > img {
    width: auto;
    height: 100%;
    max-width: 250px;
	max-width: min(100%, 250px);
	transition: all 0.3s 0.3s ease-out;
}
.pane .text-holder h3 {
    text-transform: uppercase;
	text-align: center;
    font-size: .75rem;
    margin: 0 0 8px;	
	color: #777;
}
.pane .text-holder h4 {
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.2;
	margin: 0 0 10px;
}
.info {
	line-height: 1.33;
	margin: 4px 0;
	width: 100%;
	overflow: clip;
	color: var(--color-dark-gray-text);
}	
.rank {
    position: absolute;
    top: 15px;
    right: 20px;
	width: 40px;
    height: 40px;
    font: 500 1.375rem/40px "Roboto", helvetica, arial, sans-serif;
    text-align: center;
    background: rgba(255,255,255,.5); /* url(/pic/badge.svg) no-repeat 0 / 100%; */
	border: 1px solid var(--color-light-blue);
    border-radius: 50%;
    color: #8094f4;
	transition: transform 0.5s ease-in;
}
.pane:hover .rank {
	transform: scale(1.25);
}

.pane div h3 {
    text-transform: uppercase;
    text-align: center;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.33;
    margin-bottom: 8px;
    color: var(--color-gray-text);
}
.pane div h4 {
    font: 500 1.375rem "Roboto", arial, sans-serif;
    text-align: center;
    margin: 0 0 10px;
}	
@media (max-height: 600px) {
	.pane div h4 {
		margin: 0 0 8px;
		font-size: 1.2rem;
	}
	.info {
		margin: 2px 0;
		font-size: .9rem;
	}	
}
@media (max-height: 480px) {
	.pic_holder {
		display: none;
	}
}

.flag {
    display: flex;
    flex-direction: column;
    justify-content: start;
	gap: 5px;
    text-align: center;
    position: absolute;
    top: -2px;
    right: 20px;
    background-color: #f56a66ee;
    color: #fff;
    padding: 15px 10px 35px;
	font-size: .75rem;
	line-height: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 20px), 0 100%);
	transition: padding-top .3s ease-out, background-color .3s ease-out, top 1s ease-out;
}
.flag:has(span > span) .action {
	letter-spacing: 1px;
}
.flag .discount {
    font: 500 1.3rem "Helvetica_Condensed", "Roboto", helvetica, arial, sans-serif;
    display: inline-block;
    vertical-align: bottom;
    scale: 1 1.5;
}
.flag .action {
	text-transform: uppercase;
}
.flag .small {
	font-size: 10px;
	max-width: 10ch;
	line-height: .8;
}	
.pane:hover .flag {
    padding-top: 40px;
    background-color: var(--color-red);
    transition: padding-top .75s .5s linear(  0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,  1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,  0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,  0.973, 1, 0.988, 0.984, 0.988, 1 ), background-color .5s ease-out, top 1s ease-out;
}
	

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

	.topcourses .scroll_helper, .sheet .pane {
		view-timeline: --topcourses-tl block 100% 10%;
		
		animation: run_flag_animation steps(1) both;
		animation-timeline: --topcourses-tl;
		animation-range-end: entry 40%; 

	}

    .pic_holder > picture > img {
		animation: img-scale-progress 1ms linear both;
		animation-timeline: --topcourses-tl;
	}
	@keyframes img-scale-progress {
		from {
		  scale: .3;
		}
	}

	.rank {
		animation: img-rank-progress 1ms linear both;
		animation-timeline: --topcourses-tl;
	}
	@keyframes img-rank-progress {
		from {
		  scale: 0;
		  opacity: 0;
		}
	}	

	@keyframes run_flag_animation {
		to {
			--animate-flag: true;
		}
	}	

	.flag {
		top: -100%;
		transition-delay: .5s, .5s, 1s;
	}
	@container style(--animate-flag: true) {
		.flag {
			top: -2px;
			transition-delay: .5s, .5s, 0s;
		}
		.slide:nth-child(2) .flag {
			transition-delay: .5s, .5s, .15s;
		}
		.slide:nth-child(3) .flag {
			transition-delay: .5s, .5s, .3s;
		}
		.slide:nth-child(4) .flag {
			transition-delay: .5s, .5s, .45s;
		}
		.slide:nth-child(n+5) .flag {
			transition-delay: .5s, .5s, .5s;
		}
	}
	
}}
	
/* -------- панели в каталоге -------------- */

.sheet {
    --g: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start; 	/* space-around; */
    gap: var(--g);
	margin-bottom: 5vh;
}
/* .sheet:has(+ .btns > .btn) {	
	margin-bottom: 5vh;
} */
.sheet .pane {
	font-size: 1rem;
	position: relative;
	--m: 2px;
	margin: var(--m);
	width: calc(100% - var(--m) * 2);
}
@media (min-width: 480px) {
 .sheet .pane {
	width: calc((100% - var(--g)) / 2 - var(--m) * 2);
 }
}
@media (min-width: 900px) {
 .sheet .pane {
	width: calc((100% - 2 * var(--g)) / 3 - var(--m) * 2);
 }
}
@media (min-width: 1180px) {
 .sheet .pane {
	width: calc((100% - 3 * var(--g)) / 4 - var(--m) * 2);
 }
}
.sheet + .btns {
	flex-flow: row-reverse wrap;
	gap: 20px;
}	
.content .sheet h2 {
	flex: 1 0 100%;
	margin-top: 5vh;
}