.card-slider {
	--card-width: 316px;
	--card-gap: 24px;

	position: relative;

	width: 100%;
	max-width: 100%;
	overflow: visible;

}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.card-slider__header {
	margin-bottom: 72px;
}

.card-slider__title {
	margin: 0;
}

/*
|--------------------------------------------------------------------------
| Viewport
|--------------------------------------------------------------------------
*/

.card-slider .container {
	min-width: 0;
	max-width: 100%;
}

.card-slider__viewport {
	min-width: 0;
	max-width: 100%;
	overflow: visible;
}

.card-slider__swiper {
	min-width: 0;
	max-width: 100%;

	overflow: visible;

	/*
	 * На десктопе оставляем пространство,
	 * чтобы был виден следующий слайд.
	 */
	padding-right: 160px;
}

.card-slider .swiper-wrapper {
	align-items: stretch;
	min-width: 0;
}

.card-slider .swiper-slide {
	display: flex;

	width: var(--card-width);
	max-width: 100%;
	height: auto;

	flex-shrink: 0;
}

.card-slider .content-card {
	flex: 1;
	min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.card-slider__navigation {
	display: flex;
	justify-content: center;

	margin-top: 72px;
}

.card-slider__track {
	position: relative;

	width: min(340px, 100%);
	height: 8px;

	background: #fff;
	border-radius: 999px;

	overflow: hidden;
}

.card-slider__thumb {
	position: absolute;

	left: 0;
	top: 0;

	width: 92px;
	max-width: 100%;
	height: 100%;

	border-radius: 999px;

	background: #207975;

	transform: translateX(0);
	will-change: transform;

	transition: transform .12s linear;
}

/*
|--------------------------------------------------------------------------
| Modifiers
|--------------------------------------------------------------------------
*/

.card-slider--news .content-card {
	--card-border-color: #83A645;
}

.card-slider--events {
	--card-border-color: #207975;
}

.card-slider--news .card-slider__track {
	background: rgba(124, 165, 66, .25);
}

.card-slider--news .card-slider__thumb {
	background: #7ca542;
}

.card-slider--events .card-slider__track {
	background: rgba(255, 255, 255, .9);
}

.card-slider--events .card-slider__thumb {
	background: #207975;
}

/*
|--------------------------------------------------------------------------
| Tablet / Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {
	.card-slider {
		/*
		 * Карточка не может быть шире доступной области экрана.
		 */
		--card-width: min(316px, calc(100vw - 40px));
	}

	.card-slider__swiper {
		/*
		 * На планшете и мобильном дополнительная ширина справа
		 * больше не нужна.
		 */
		padding-right: 0;
	}

	.card-slider__header {
		margin-bottom: 40px;
	}

	.card-slider__navigation {
		margin-top: 40px;
	}
}