@font-face {
	font-style: normal;
	font-weight: 700;
	src:
		local('Benzin Bold'),
		local('Benzin-Bold'),
		url('../../../font/benzin-bold.woff2') format('woff2');
	font-family: 'Benzin';
}

:root {
	--color-ink: #232536;
	--color-accent-curs: #ff661a;
	--color-soft: #fff0e7;
	--color-green-soft: #e9f4ed;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 7.2rem;
	}
}

/* класс для автонумерации с ведущим нулем */

.decimal-leading-zero {
	counter-reset: item;

	& > li,
	& > article {
		counter-increment: item;

		&::before {
			content: counter(item, decimal-leading-zero);
		}
	}
}

.page-education,
.page-cours,
.page-lecture {
	& .button {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		gap: 1rem;
		-webkit-transition:
			background 0.2s ease,
			color 0.2s ease;
		transition:
			background 0.2s ease,
			color 0.2s ease;
		border-radius: 28px;
		background: #ff661a;
		padding: 15px 30px;
		color: #fff;
		font-weight: 800;
		font-size: 16px;
		line-height: 138%;

		& .icon {
			-webkit-transition: -webkit-transform 0.4s ease;
			transition: -webkit-transform 0.4s ease;
			transition: transform 0.4s ease;
			transition:
				transform 0.4s ease,
				-webkit-transform 0.4s ease;
		}

		&:hover {
			background: var(--color-accent-curs);
		}
		&:hover .icon {
			-webkit-transform: translateX(5px);
			-ms-transform: translateX(5px);
			transform: translateX(5px);
		}

		&.button--black {
			display: -webkit-inline-box;
			display: -ms-inline-flexbox;
			display: inline-flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-ms-flex-item-align: stretch;
			-ms-grid-row-align: stretch;
			align-self: stretch;
			gap: 1rem;
			background: var(--color-bg-inverted);
			color: #ffffff;
		}
		&.button-light {
			background: #ffffff;
			color: var(--color-ink);

			&:hover {
				background: var(--color-accent-curs);
				color: #ffffff;
			}
		}
	}
}
.page-education .sections,
.page-cours .sections,
.page-lecture .sections {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 25px;
	padding: 0 12px;
}
.page-education .educational-courses,
.page-cours .cours,
.page-lecture .lecture {
	--courses-gap: 20px;
	position: relative;
	border-radius: 28px;
	background: #fff;
	padding: 16px;
	width: 100%;
}

.educational-courses__inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--courses-gap);
}
.educational-courses .section-top {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--courses-gap);
}
.educational-courses .section__title {
	font-weight: 700;
	font-size: 18px;
	line-height: 121%;
	font-family: var(--font-family-title);
	text-wrap: balance;
}
.educational-courses .section__subtitle {
	font-weight: 400;
	font-size: 18px;
	line-height: 141%;
}
.educational-courses__list {
	--courses-list-gap: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--courses-list-gap);
}
.educational-courses__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 48px;
	border: 1px solid #f0d9cb;
	border-radius: 28px;
	background: #fff8f3;
	padding: 16px;

	& .cours-item__image {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		border-radius: 16px;
		max-width: 320px;
		max-height: 220px;
		overflow: hidden;

		& img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			object-fit: cover;
			-o-object-position: center;
			object-position: center;
		}
		& .cours-item__image--slogan {
			position: absolute;
			bottom: 13%;
			left: 9%;
			background-color: transparent;
			color: #fff;
			font-weight: 700;
			font-size: 10px;
			line-height: 142%;
			text-transform: uppercase;
		}
	}
	& .cours-item__content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px;
	}
	& .cours-item__slogan {
		color: #686a78;
		font-weight: 800;
		font-size: 13px;
		line-height: 138%;
		text-transform: uppercase;
	}
	& .cours-item__title {
		font-weight: 800;
		font-size: 24px;
		line-height: 1.2;
	}
	& .cours-item__text {
		color: #686a78;
		font-weight: 400;
		font-size: 16px;
		line-height: 139%;
	}
	& .cours-item__tags {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 1ch;
		font-weight: 700;
		font-size: 15px;
		line-height: 140%;
	}
	& .cours-item__tag {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 1ch;
	}
	& .cours-item__tag:not(:last-child)::after {
		display: block;
		border-radius: 20px;
		background-color: var(--color-font-default);
		width: 2px;
		height: 2px;
		content: '';
	}
}

/* Страница курса */

.page-cours {
	& [class*='__title'] {
		font-family: var(--font-family-title);
	}
	& .page__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 24px;
	}
}

.page-cours .page-header {
	background: linear-gradient(113.36deg, #fe0133 -9.95%, #ff4a20 34.46%, #ff8c00 82.58%);
	padding: 24px;
	width: calc(100% - 24px);
	color: #ffffff;

	& .page-header__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 28px;
	}

	& .page-header__content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 24px;
		padding: 0;
	}

	& .page-header__category {
		font-weight: 800;
		font-size: 12px;
		line-height: 143%;
		text-transform: uppercase;
	}

	& .page-header__title {
		font-weight: 700;
		font-size: 22px;
		line-height: 123%;
		font-family: var(--font-family-title);
		text-wrap: balance;
	}

	& .page-header__subtitle {
		max-width: 33ch;
		font-weight: 700;
		font-size: 19px;
		line-height: 141%;
		text-wrap: balance;
	}

	& .button.button--black {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-item-align: stretch;
		-ms-grid-row-align: stretch;
		align-self: stretch;
		gap: 1rem;
		-webkit-transition:
			background 0.2s ease,
			color 0.2s ease;
		transition:
			background 0.2s ease,
			color 0.2s ease;
		border-radius: 28px;
		background: var(--color-bg-inverted);
		padding: 15px 30px;
		color: #fff;
		font-weight: 800;
		font-size: 16px;
		line-height: 138%;

		& .icon {
			-webkit-transition: -webkit-transform 0.4s ease;
			transition: -webkit-transform 0.4s ease;
			transition: transform 0.4s ease;
			transition:
				transform 0.4s ease,
				-webkit-transform 0.4s ease;
		}

		&:hover {
			background: var(--color-green-soft);
			color: var(--color-accent-curs);
		}
		&:hover .icon {
			-webkit-transform: translateY(5px);
			-ms-transform: translateY(5px);
			transform: translateY(5px);
		}
	}

	& .page-header__image {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		border-radius: 24px;
		max-width: 472px;
		max-height: 406px;
		overflow: hidden;

		& img {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			object-fit: cover;
			-o-object-position: center;
			object-position: center;
		}
		& .page-header__image--slogan {
			position: absolute;
			bottom: 13%;
			left: 9%;
			background-color: transparent;
			color: #fff;
			font-weight: 700;
			font-size: 12px;
			line-height: 142%;
			text-transform: uppercase;
		}
	}
}

.page-cours .cours {
	& .cours__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 40px;
	}

	& .cours__separator {
		background-color: #dcdde5;
		width: 100%;
		height: 1px;
	}

	& .section-top {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		row-gap: 20px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;

		& .section-top__info,
		& .section-top__title {
			-ms-grid-column: 1;
			grid-column: 1;
		}

		& .section-top__info {
			font-size: 13px;
			line-height: 1.38;
			text-transform: uppercase;
		}

		& .section-top__title {
			-ms-grid-row: 2;
			-ms-grid-row-span: 2;
			grid-row: 2/4;
			margin-top: -8px;
			max-width: 10ch;
			font-size: 25px;
			line-height: 1.17;
		}

		& .section-top__subtitle,
		& .section-top__list {
			-ms-grid-column: 2;
			grid-column: 2;
		}
		& .section-top__subtitle {
			-ms-grid-row: 1;
			-ms-grid-row-span: 2;
			grid-row: 1/3;
			font-size: 17px;
			line-height: 1.4;
		}
		& .section-top__list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			gap: 24px;

			& .section-top__item {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
				gap: 8px;
				color: var(--color-ink);
				font-weight: 700;
				font-size: 17px;
			}

			& .section-top__item::before {
				color: #686a78;
				font-size: 14px;
				line-height: 1.43;
			}
		}
	}

	& .cours__wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 28px;
	}

	& .cours__title {
		color: #232536;
		font-weight: 700;
		font-size: 27px;
		line-height: 117%;
	}

	& .cours__content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 24px;
	}

	& .cours__list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		row-gap: 16px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	& .cours-step {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: auto 6px 1fr 6px auto;
		grid-template-columns: auto 1fr auto;
		-webkit-column-gap: 12px;
		-moz-column-gap: 12px;
		column-gap: 12px;
		row-gap: 16px;
		border: 1px solid #dcdde5;
		border-radius: 20px;
		background: #f7f7fa;
		padding: 20px;

		&::before {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-grid-row: 1;
			grid-row: 1;
			-ms-grid-column: 1;
			grid-column: 1;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-ms-grid-row-align: center;
			align-self: center;
			border: 1px solid #dcdde5;
			border-radius: 16px;
			background: #fff;
			width: 48px;
			height: 48px;
			color: #686a78;
			font-weight: 800;
			font-size: 24px;
			line-height: 142%;
		}

		& .cours-step__heading {
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-column: 1/4;
			font-weight: 800;
			font-size: 21px;
			line-height: 142%;
		}

		& .cours-step__status {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-grid-row: 1;
			grid-row: 1;
			-ms-grid-column: 2;
			grid-column: 2;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-ms-grid-row-align: center;
			align-self: center;
			-ms-grid-column-align: start;
			justify-self: start;
			gap: 6px;
			border-radius: 12px;
			background: #f0f0f5;
			padding: 8px;
			color: #686a78;
			font-weight: 700;
			font-size: 13px;
			line-height: 138%;
		}

		& .cours-step__desc {
			display: block;
			-ms-grid-row: 3;
			grid-row: 3;
			-ms-grid-column: 1;
			-ms-grid-column-span: 2;
			grid-column: 1/3;
			-ms-grid-row-align: center;
			align-self: center;
			color: #686a78;
			font-weight: 400;
			font-size: 14px;
			line-height: 143%;
		}

		& .cours-step__link {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-grid-row: 3;
			grid-row: 3;
			-ms-grid-column: 3;
			grid-column: 3;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;

			&::before {
				content: attr(data-text-mobile);
				color: #a83a09;
				font-weight: 700;
				font-size: 17px;
				line-height: 141%;
			}

			& .icon {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				border: 1px solid #dcdde5;
				border-radius: 22px;
				background-color: #fff;
				width: 44px;
				height: 44px;
			}
		}

		&.--is-active {
			border: 1px solid #f0d9cb;
			background: #fff8f3;

			&::before {
				background: linear-gradient(113.36deg, #fe0133 0%, #ff4a20 38.1%, #ff8c00 79.37%);
				color: #ffffff;
			}

			& .cours-step__status {
				background: #e9f4ed;
				color: #256347;
			}

			& .cours-step__desc {
				display: none;
			}

			& .cours-step__link {
				-ms-grid-column: 1;
				-ms-grid-column-span: 3;
				grid-column: 1/4;
				& .icon {
					-webkit-transition: background 0.2s ease;
					transition: background 0.2s ease;
					background: #232536;
					color: #ffffff;
				}
			}
		}
	}

	& .cours-chat {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		gap: 24px;
		border-radius: 24px;
		background: #232536;
		padding: 28px;
		max-width: 500px;
		color: #ffffff;

		&::before {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 32px;
			height: 32px;
			content: url(../../../images/courses/chat.svg);
		}

		& .cours-chat__title {
			max-width: 12ch;
			font-weight: 700;
			font-size: 28px;
			line-height: 114%;
		}

		& .cours-chat__info {
			font-weight: 400;
			font-size: 17px;
			line-height: 141%;
		}
		& .button {
			-ms-flex-item-align: stretch;
			-ms-grid-row-align: stretch;
			align-self: stretch;
		}
		& .cours-chat__desc {
			max-width: 26ch;
			font-weight: 400;
			font-size: 14px;
			line-height: 143%;
		}
	}

	& .education__wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px;

		& .education__title {
			font-weight: 700;
			font-size: 27px;
			line-height: 117%;
		}

		& .education__list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 20px;
		}

		& .education__item {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 12px;
			border: 1px solid #dcdde5;
			border-radius: 20px;
			background: #f7f7fa;
			padding: 24px;

			& .education__item--title {
				font-weight: 800;
				font-size: 19px;
				line-height: 142%;
			}

			& .education__item--text {
				color: #686a78;
				font-weight: 400;
				font-size: 16px;
				line-height: 138%;
			}
		}
	}
}

/* страница lecture */

.page-lecture {
	& .breadcrumbs__item {
		color: #a83a09;
		font-weight: 800;
	}
	& .lecture__inner {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 16px;
	}

	& .section-top {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 16px;
	}

	& .lecture__title {
		max-width: 25ch;
		color: #232536;
		font-weight: 700;
		font-size: 28px;
		line-height: 116%;
		font-family: var(--font-family-title);
	}

	& .lecture__status {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-grid-row: 1;
		grid-row: 1;
		-ms-grid-column: 2;
		grid-column: 2;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-grid-row-align: start;
		align-self: start;
		gap: 6px;
		border-radius: 12px;
		background: #e9f4ed;
		padding: 8px;
		color: #256347;
		font-weight: 700;
		font-size: 13px;
		line-height: 138%;
	}

	& .lecture__wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 30px;
	}

	& .lecture__content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-grid-column: 1;
		grid-column: 1;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 32px;
	}

	& .lecture__video {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		border-radius: 24px;
		background: #232536;
		overflow: hidden;

		& video {
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			object-fit: cover;
		}
	}

	& .lecture__info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 12px;

		& .info__title {
			font-weight: 800;
			font-size: 28px;
			line-height: 139%;
		}

		& .info__text {
			color: #686a78;
			font-weight: 400;
			font-size: 18px;
			line-height: 139%;
		}
	}

	& .lecture__materials {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 12px;

		& .materials__title {
			font-weight: 800;
			font-size: 28px;
			line-height: 139%;
		}

		& .materials__list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 16px;
		}

		& .materials__item {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 16px;
			border: 1px solid #dcdde5;
			border-radius: 16px;
			background: #f7f7fa;
			padding: 16px;

			& .material-info {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				gap: 12px;
			}

			& .material-info__type {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				border-radius: 8px;
				background: #232536;
				padding: 8px;
				width: 40px;
				height: 40px;
				color: #fff;
				font-weight: 700;
				font-size: 12px;
				line-height: 142%;
			}

			& .material-info__name {
				color: #232536;
				font-weight: 700;
				font-size: 20px;
				line-height: 140%;
			}

			& .material__actions {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				gap: 8px;

				& > a {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					-webkit-transition:
						background 0.2s ease,
						color 0.2s ease,
						border-color 0.2s ease;
					transition:
						background 0.2s ease,
						color 0.2s ease,
						border-color 0.2s ease;
					border: 1px solid transparent;
					border-radius: 28px;
					padding: 16px;
					min-width: 130px;
					font-weight: 700;
					font-size: 16px;
					line-height: 138%;

					&.black {
						background: #232536;
						color: #ffffff;
					}
				}
			}
		}
	}

	& .lecture__links {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px;

		& .links__title {
			font-weight: 800;
			font-size: 28px;
			line-height: 139%;
		}

		& .links__list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 16px;
		}

		& .links__item {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			gap: 16px;
			border: 1px solid #dcdde5;
			border-radius: 16px;
			background: #f7f7fa;
			padding: 20px;
			font-weight: 700;
			font-size: 18px;
			line-height: 139%;

			& .link-icon {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				-webkit-transition:
					background 0.2s ease,
					color 0.2s ease,
					border-color 0.2s ease;
				transition:
					background 0.2s ease,
					color 0.2s ease,
					border-color 0.2s ease;
				border: 1px solid #dcdde5;
				border-radius: 18px;
				background: #fff;
				width: 36px;
				height: 36px;
				color: #a83a09;
			}
		}
	}

	& .lecture__separator {
		background-color: #dcdde5;
		width: 100%;
		height: 1px;
	}

	& .lecture__navigation {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: start;
		gap: 16px;

		& > a,
		& > button {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			gap: 8px;
			-webkit-transition:
				background 0.2s ease,
				color 0.2s ease,
				border-color 0.2s ease;
			transition:
				background 0.2s ease,
				color 0.2s ease,
				border-color 0.2s ease;
			border: 1px solid transparent;
			border-radius: 28px;
			padding: 16px 32px;
			min-width: 260px;
			font-weight: 700;
			font-size: 16px;
			line-height: 138%;
		}
	}

	& .lecture-aside {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 32px;
	}

	& .lecture-curs {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 20px;
		border: 1px solid #dcdde5;
		border-radius: 20px;
		background: #f7f7fa;
		padding: 24px;

		& .lecture-curs__title {
			font-weight: 800;
			font-size: 22px;
			line-height: 141%;
		}

		& .lecture-curs__list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 20px;
		}

		.lecture-curs__item {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: auto 16px 1fr;
			grid-template-columns: auto 1fr;
			-webkit-column-gap: 16px;
			-moz-column-gap: 16px;
			column-gap: 16px;
			row-gap: 8px;
			border: 1px solid transparent;
			border-radius: 12px;
			padding: 12px;

			&::before {
				font-weight: 700;
				font-size: 13px;
				line-height: 138%;
			}

			& .status {
				font-weight: 700;
				font-size: 13px;
				line-height: 138%;
			}

			& .heading {
				-ms-grid-row: 2;
				grid-row: 2;
				-ms-grid-column: 1;
				-ms-grid-column-span: 2;
				grid-column: 1/3;
				font-weight: 400;
				font-size: 16px;
				line-height: 138%;
			}

			&.--is-active {
				border: 1px solid #f0d9cb;
				background: #fff0e7;

				&::before {
					color: #a83a09;
				}

				& .heading {
					font-weight: 700;
				}
			}
		}
	}

	& .cours-chat {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-item-align: center;
		-ms-grid-row-align: center;
		align-self: center;
		gap: 16px;
		border-radius: 20px;
		background: #232536;
		padding: 24px;
		max-width: 400px;
		color: #ffffff;

		& .cours-chat__title {
			font-weight: 800;
			font-size: 22px;
			line-height: 141%;
		}

		& .cours-chat__info {
			font-weight: 400;
			font-size: 16px;
			line-height: 138%;
		}

		& .button {
			-ms-flex-item-align: stretch;
			-ms-grid-row-align: stretch;
			align-self: stretch;
		}
	}

	/* страница закрытой лекции */

	&.page-lecture--close {
		& .lecture__inner {
			gap: 28px;
		}
		& .lecture__status {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-grid-column: 1;
			grid-column: 1;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-align: start;
			-ms-flex-align: start;
			align-items: start;
			gap: 20px;
			border: 1px solid #dcdde5;
			border-radius: 20px;
			background: #f7f7fa;
			padding: 24px;

			& .status__title {
				color: #232536;
				font-weight: 800;
				font-size: 24px;
				line-height: 142%;
			}

			& .status__text {
				color: #686a78;
				font-weight: 400;
				font-size: 17px;
				line-height: 141%;
			}

			& .button {
				-ms-flex-item-align: start;
				-ms-grid-row-align: start;
				align-self: start;
			}
		}
		& .lecture__wrapper {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 28px;
		}
	}
}

/* media */

@media screen and (min-width: 390px) {
	.page-education .educational-courses,
	.page-cours .cours,
	.page-lecture .lecture {
		--courses-gap: 30px;
		padding: 32px 24px;
	}
	.educational-courses .section__title {
		font-weight: 700;
		font-size: 22px;
	}

	.educational-courses__item {
		padding: 24px;

		& .cours-item__title {
			font-weight: 800;
			font-size: 32px;
		}

		& .button {
		}
	}

	.page-cours .cours {
		& .section-top {
			& .section-top__title {
				font-size: 27px;
			}
		}
	}

	.page-lecture {
		& .lecture__materials {
			& .materials__item {
				& .material__actions {
					-webkit-box-pack: start;
					-ms-flex-pack: start;
					justify-content: start;
				}
			}
		}
	}
}

@media screen and (min-width: 500px) {
	.educational-courses .section__title {
		font-size: 30px;
	}
}

@media screen and (min-width: 567px) {
	.educational-courses__item {
		& .cours-item__title {
			line-height: 1.4;
		}
		& .cours-item__text {
			font-size: 18px;
		}
		& .cours-item__tags {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
		}
		& .button {
			min-width: 300px;
		}
	}

	.page-cours .page-header {
		& .button.button--black {
			-ms-flex-item-align: center;
			-ms-grid-row-align: center;
			align-self: center;
		}
	}

	.page-cours .cours {
		& .section-top {
			& .section-top__title {
				max-width: none;
			}
		}

		& .cours-step {
			& .cours-step__link {
				-ms-grid-column: 2;
				-ms-grid-column-span: 2;
				grid-column: 2/4;
			}
		}
	}
}

@media screen and (min-width: 768px) {
	.page-cours .cours {
		& .section-top {
			& .section-top__list {
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;
			}
		}
		& .cours-step {
			-ms-grid-columns: auto 12px auto 12px 1fr 12px auto;
			grid-template-columns: auto auto 1fr auto;
			&::before {
				-ms-grid-row: 1;
				-ms-grid-row-span: 2;
				grid-row: 1/3;
				width: 64px;
				height: 64px;
			}
			& .cours-step__heading,
			& .cours-step__info {
				-ms-grid-column: 2;
				-ms-grid-column-span: 2;
				grid-column: 2/4;
			}

			& .cours-step__info {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-grid-row: 2;
				grid-row: 2;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				gap: 12px;
			}
			& .cours-step__desc {
				display: block;
				-ms-grid-row: 1;
				grid-row: 1;
				-ms-grid-column: 3;
				grid-column: 3;
				color: #686a78;
				font-weight: 400;
				font-size: 14px;
				line-height: 143%;
			}

			& .cours-step__link {
				-ms-grid-row: 1;
				-ms-grid-row-span: 2;
				grid-row: 1/3;
				-ms-grid-column: 4;
				grid-column: 4;

				&::before {
					content: none;
				}
			}

			&.--is-active {
				& .cours-step__desc {
					display: block;
				}
				& .cours-step__link {
					-ms-grid-row: 1;
					-ms-grid-row-span: 2;
					grid-row: 1/3;
					-ms-grid-column: 4;
					grid-column: 4;

					&::before {
						content: none;
					}
				}
			}
		}
	}

	.page-lecture {
		& .section-top {
			gap: 20px;
		}

		& .lecture__title {
			font-size: 36px;
		}

		& .lecture__materials {
			& .materials__item {
				padding: 20px;
			}
		}
	}
}

@media screen and (min-width: 1024px) {
	.educational-courses__item {
		& .button {
		}
	}
	.page-cours {
		& .page__inner {
			gap: 48px;
		}
	}
	.page-cours .page-header {
		padding: 36px 24px;

		& .page-header__inner {
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-ms-flex-direction: row;
			flex-direction: row;
			gap: 56px;
		}

		& .page-header__category {
			font-size: 14px;
		}

		& .page-header__title {
			font-size: 36px;
		}

		& .page-header__subtitle {
			font-size: 22px;
		}

		& .button.button--black {
			-ms-flex-item-align: start;
			-ms-grid-row-align: start;
			align-self: start;
		}
	}
	.page-cours .cours {
		& .cours-step {
			&.--is-active {
				& .cours-step__link {
					&:hover .icon {
						background: var(--color-accent-curs);
					}
				}
			}
		}
	}
}

@media screen and (min-width: 1200px) {
	.page-courses .sections,
	.page-lecture .sections {
		padding: 0 24px;
	}
	.educational-courses .section__title {
		font-size: 48px;
	}
	.educational-courses .section__subtitle {
		font-size: 22px;
	}
	.page-education .educational-courses,
	.page-cours .cours {
		--courses-gap: 40px;
		padding: 96px 72px;
		width: 100%;
	}
	.page-lecture .lecture {
		padding: 42px 72px;
	}
	.educational-courses__item {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		& .cours-item__image {
			-ms-flex-negative: 0;
			flex-shrink: 0;
			border-radius: 24px;
			width: 100%;
			max-width: 460px;
			max-height: 360px;

			& .cours-item__image--slogan {
				font-size: 12px;
			}
		}

		& .cours-item__content {
			gap: 30px;
		}

		& .button {
			-ms-flex-item-align: start;
			-ms-grid-row-align: start;
			align-self: start;
		}
	}

	.page-cours .page-header {
		& .page-header__title {
			font-size: 48px;
		}
	}

	.page-cours .cours {
		& .cours__inner {
			gap: 64px;
		}

		& .cours__title {
			font-size: 36px;
		}

		& .section-top {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: auto 96px 1fr;
			grid-template-columns: auto 1fr;
			-webkit-column-gap: 96px;
			-moz-column-gap: 96px;
			column-gap: 96px;
			row-gap: 12px;

			& .section-top__title {
				margin: 0;
				max-width: 10ch;
				font-size: 30px;
			}

			& .section-top__subtitle {
				font-size: 20px;
			}
		}

		& .cours__content {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: 1fr 36px 400px;
			grid-template-columns: 1fr 400px;
			-webkit-column-gap: 36px;
			-moz-column-gap: 36px;
			column-gap: 36px;
		}

		& .cours-step {
			-webkit-column-gap: 24px;
			-moz-column-gap: 24px;
			column-gap: 24px;
			row-gap: 12px;
			padding: 42px 20px;
			min-height: 164px;
		}

		& .cours-step__heading {
			font-size: 24px;
		}

		& .cours-chat {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			position: sticky;
			top: 8rem;
			-ms-flex-item-align: start;
			-ms-grid-row-align: start;
			align-self: start;
		}

		& .education__wrapper {
			& .education__title {
				font-size: 30px;
			}
		}
	}

	.page-lecture {
		& .lecture__inner {
			gap: 40px;
		}

		& .lecture__title {
			font-size: 44px;
		}

		& .lecture__wrapper {
			display: -ms-grid;
			display: grid;
			-ms-grid-columns: 1fr 92px 316px;
			grid-template-columns: 1fr 316px;
			-webkit-column-gap: 92px;
			-moz-column-gap: 92px;
			column-gap: 92px;
			row-gap: 24px;
		}

		& .lecture__content {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-grid-row: 1;
			-ms-grid-row-span: 3;
			grid-row: 1/4;
			-ms-grid-column: 1;
			grid-column: 1;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 40px;
		}

		& .lecture__materials {
			& .materials__item {
				& .material__actions {
					& > a {
						&:hover {
							border-color: var(--color-bg-inverted);
						}
						&.black {
							&:hover {
								border-color: var(--color-bg-inverted);
								background: #ffffff;
								color: var(--color-bg-inverted);
							}
						}
					}
				}
			}
		}

		& .lecture__links {
			& .links__item {
				& .link-icon {
					&:hover {
						border-color: var(--color-accent-curs);
					}
				}
			}
		}

		& .lecture__navigation {
			& > a,
			& > button {
				&:hover {
					border-color: var(--color-bg-inverted);
				}
			}
			& .button--black {
				&:hover {
					border-color: var(--color-bg-inverted);
					background: #ffffff;
					color: var(--color-bg-inverted);
				}
			}
		}

		& .lecture-aside {
			-ms-grid-column: 2;
			grid-column: 2;
		}

		& .lecture-aside {
			position: sticky;
			top: 8rem;
		}
	}
	.page-lecture {
		&.page-lecture--close {
			& .lecture__wrapper {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 92px 316px;
				grid-template-columns: 1fr 316px;
				-webkit-column-gap: 92px;
				-moz-column-gap: 92px;
				column-gap: 92px;
				row-gap: 24px;
			}
		}
	}
}

@media screen and (min-width: 1441px) {
	.page-courses .sections {
		padding: 0 5rem;
	}
	.page-cours .page-header {
		padding: 64px;
		width: calc(100% - 48px);
	}
	.page-cours .sections {
		padding: 0 24px;
	}

	.page-lecture {
		& .lecture__wrapper {
		}
	}
}
@media screen and (min-width: 1600px) {
	.page-courses .sections {
		padding: 0 12rem;
	}
}