:root {
	/*
	* полосочка вокргу превью - абсолютная
	* все отступы измеряеются относительно картиники
	*/
	--stories-preview-mr: 55px;

	--stories-preview-gap: 20px;

	--stories-preview-line-color-active: var(--main-color);
	--stories-preview-line-color-default: lightgray;
	--stories-preview-line-size: 3px;
	--stories-preview-line-padding: 2px;

	--stories-preview-img-size: 124px;
	--stories-preview-img-padding: 20px;
	--stories-preview-width: 160px;

	--stories-preview-name-fz: 14px;
	--stories-preview-name-weight: 500;
	--stories-preview-name-lh: 1.3;

	--stories-detail-width: 501px;
	--stories-detail-height: 890px;

	--stories-btn-width: 350px;
	--stories-btn-fz: 20px;
	--stories-btn-height: 60px;
	--stories-btn-gap: 10px;
	--main-stories-pad-b: 30px;
	--stories-slider-slide-radius: 20px
}

@media (min-height:1440px) {
	:root {

		--stories-detail-width: 635px;
		--stories-detail-height: 1200px;
		--stories-btn-f2: 25px;

		--stories-btn-width: 475px;
		--stories-btn-height: 86px;
		--stories-btn-gap: 20px;
		--main-stories-pad-b: 44px
	}

}

@media (max-height:800px) {
	:root {
		--stories-detail-width: 450px;
		--stories-detail-height: 930px;
		--stories-btn-f2: 25px;

		--stories-btn-width: 400px;
		--stories-btn-height: 86px;

	}

}

@media (max-width:1280px) {
	:root {
		--stories-preview-mr: 22px;
		--stories-btn-gap: 18px;

	}
}

@media (max-width:1024px) {
	:root {
		--stories-preview-width: 120px;
		--stories-preview-img-size: 120px;

	}
}

@media (max-width:800px) {
	:root {

		--stories-slider-slide-radius: 0px;
		--main-stories-pad-b: 0;
		--stories-btn-height: 45px;
		--stories-btn-width: 250px;
		--stories-btn-fz: 18px;
		--stories-btn-gap: 10px;

	}
}

@media (max-width:640px) {
	:root {

		--stories-preview-width: 96px;
		--stories-preview-img-size: 85px;
		--stories-preview-gap: 10px;
		--stories-preview-mr: 10px;

		--stories-preview-name-fz: 12px
	}
}

.storiesDetail {
	--stories-slider-slide-radius: 0;
	--stories-slider-line-color: #fff;
	--stories-slider-line-color-active: var(--main-color);
	--stories-slider-line-offset-center: 15px;
	--stories-slider-line-offset-top: 10px;
	--stories-slider-line-height: 5px;
	--stories-slider-line-radius: 100px;
	--stories-slider-line-gap: 6px;
}

@keyframes load {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.stories .swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--stories-preview-gap);
	width: var(--stories-preview-width);
	/* width: min-content; */
	cursor: pointer;
	margin-right: var(--stories-preview-mr);
}

.stories .swiper-slide:first-of-type {
	margin-left: var(--container-padding);
}

.stories .swiper-slide._watched {
	order: 1;
	margin-left: 0;
}

.stories__img {
	width: var(--stories-preview-img-size);
	height: var(--stories-preview-img-size);
	border-radius: 50%;
	position: relative;
	margin:
		0 calc(var(--stories-preview-img-padding) - (var(--stories-preview-line-padding) + var(--stories-preview-line-size)));
	padding: calc(var(--stories-preview-line-padding) + var(--stories-preview-line-size));
}

.stories-slider {
	padding-block: var(--main-stories-pad-b);
}

.stories__img::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: var(--stories-preview-line-size);
	background: var(--stories-preview-line-color-active);

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

.stories .swiper-slide._watched .stories__img::before {
	background: var(--stories-preview-line-color-default);
}

.stories .swiper-slide._load .stories__img::before {
	animation: load 1.5s infinite linear;
	background: conic-gradient(from 90deg at 50% 50%,
			rgba(0, 123, 198, 0) 0deg,
			var(--stories-preview-line-color-active) 270deg,
			var(--stories-preview-line-color-active) 360deg);
}

.stories__img img {
	border-radius: 50%;
}

.stories__name {
	font-size: var(--stories-preview-name-fz);
	font-weight: var(--stories-preview-name-weight);
	line-height: var(--stories-preview-name-lh);
	text-align: center;
}

.stories-slider {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;

	position: fixed;
	inset: 0;
	width: 100svw;
	height: 100svh;
}

.stories-slider._open {
	opacity: 1;
	pointer-events: all;
	z-index: 24;
}

.stories-slider>.swiper {
	max-width: var(--stories-detail-width);
	max-height: var(--stories-detail-height);
	overflow: unset;
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide {
	transform: scale(0.75);
	transition: .3s ease;
	margin-right: 120px;
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide.swiper-slide-active {
	transform: scale(1);
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(18, 42, 56, 0.75);
	z-index: 5;
	transition: opacity .3s ease;
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide.swiper-slide-active::before {
	opacity: 0;
	pointer-events: none;
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide .stories-slider-pagination {
	opacity: 0;
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide.swiper-slide-active .stories-slider-pagination {
	opacity: 1;
}


.stories-slider .swiper .swiper .swiper-slide {
	border-radius: var(--stories-slider-slide-radius);

}

.stories-slider .swiper .swiper .swiper-slide .swiper-slide__btn {
	background: var(--story-main-color, var(--main-color));
	color: var(--white-color);
	font-size: var(--stories-btn-fz);
	line-height: 1.5;
	display: flex;

	gap: var(--stories-btn-gap);
	align-items: center;
	justify-content: center;
	height: var(--stories-btn-height);
	width: 100%;
	max-width: var(--stories-btn-width);
	position: absolute;
	left: 50%;
	border-radius: 86px;
	z-index: 210;
	bottom: 150px;
	transform: translate(-50%, 100px);
	overflow: hidden;

}

.swiper-slide__btn span {
	z-index: 2;
}

.stories-slider .swiper .swiper .swiper-slide .swiper-slide__btn::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 0;
	transition: opacity .3s ease;
	z-index: -1;
}

.stories-slider .swiper .swiper .swiper-slide .swiper-slide__btn:hover::before {
	opacity: 0.2;
}

.stories-slider-pagination-bullet {
	background-color: #fff;
	height: 6px;
	margin-right: 5px;
}

.stories-slider-pagination-bullet span {

	background: var(--story-main-color, var(--main-color));
}

.stories-slider-pagination-bullet-viewed span {
	background: var(--story-main-color, var(--main-color), #38AA35);
}

.stories-slider-pagination-bullet-viewed {
	background: var(--story-main-color, var(--main-color));
}

.stories-slider-actions {
	top: 25px;
}