:root {
	--l-color-0: #120819;
    --l-color-0-bx: inset 0 0 0.4em 0 #00B5FE, 0 0 0.5em 0 #00B5FE;

    --l-color-1: url('https://fs.getcourse.ru/fileservice/file/download/a/617429/sc/204/h/372786bb640562a8a8c82faebe067d7f.jpg');
    --l-color-1-bx: inset 0 0 0.4em 0 #00B5FE, 0 0 0.5em 0 #00B5FE;

    --l-color-2: url('https://fs.getcourse.ru/fileservice/file/download/a/617429/sc/276/h/db914c62a524ad4e17f0d381ab1d8b5f.jpg');
    --l-color-2-bx: inset 0 0 0.5em 0 #F99054, 0 0 0.5em 0 #F99054;

    --l-color-3: url('https://fs.getcourse.ru/fileservice/file/download/a/617429/sc/511/h/8182dca01cd9c0f37d48665303865105.jpg');
    --l-color-3-bx: inset 0 0 0.4em 0 #7F4ACC, 0 0 0.5em 0 #7F4ACC;

    --l-color-4: url('https://fs.getcourse.ru/fileservice/file/download/a/617429/sc/345/h/01dce3d5980bf54e6439e4fed8daba74.jpg');
    --l-color-4-bx: inset 0 0 0.4em 0 #FE43FE, 0 0 0.5em 0 #FE43FE;
}

.designActive .lesson-list {
	background: transparent;
	padding: 0;
}

.designActive .lesson-card {
	margin: 0;
	border-radius: inherit;
	margin-bottom: 18px;
	min-height: initial;
    transition: .4s;
}

.designActive .lesson-card:hover {
	transform: scale(1.02);
	transition: .4s;
}

.designActive .lesson-list .lesson-card .item-a {
	min-height: 102px;
	border-radius: 20px;
	padding: 28px 18px;
	padding-left: 64px;
    display: flex;
    align-items: center;
    background-color: #120819;
}

.designActive .lesson-list .lesson-card .lesson-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.designActive .lesson-list .lesson-card .lesson-wrap .lesson-title {
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	width: 60%;
	line-height: initial;
}

.designActive .lesson-list .lesson-card .lesson-wrap .lesson-btn {
	text-transform: uppercase;
	color: #fff;
	font-size: 17px;
	border-radius: 30px;
	padding: 12px 28px;
	font-weight: 500;
	border: 1px solid #E7F8FF;
	position: relative;
	display: flex;
	align-items: center;
}

.designActive .lesson-list .lesson-card .lesson-wrap .lesson-btn:after {
	content: '';
	width: 12px;
	height: 18px;
	margin-left: 12px;
	display: flex;
	background: url(https://fs.getcourse.ru/fileservice/file/download/a/617429/sc/186/h/fd6622b7188a33b25bbbe905449ceb02.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Цвет 0 */
.designActive.lessonsColor-0 .lesson-list .lesson-card .item-a {
	background: var(--l-color-0);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.designActive.lessonsColor-0 .lesson-list .lesson-card .lesson-wrap .lesson-btn {
	box-shadow: var(--l-color-0-bx);
}
/* ====== */

/* Цвет 1 */
.designActive.lessonsColor-1 .lesson-list .lesson-card .item-a {
	background: var(--l-color-1);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.designActive.lessonsColor-1 .lesson-list .lesson-card .lesson-wrap .lesson-btn {
	box-shadow: var(--l-color-1-bx);
}
/* ====== */

/* Цвет 2 */
.designActive.lessonsColor-2 .lesson-list .lesson-card .item-a {
	background: var(--l-color-2);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.designActive.lessonsColor-2 .lesson-list .lesson-card .lesson-wrap .lesson-btn {
	box-shadow: var(--l-color-2-bx);
}
/* ====== */

/* Цвет 3 */
.designActive.lessonsColor-3 .lesson-list .lesson-card .item-a {
	background: var(--l-color-3);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.designActive.lessonsColor-3 .lesson-list .lesson-card .lesson-wrap .lesson-btn {
	box-shadow: var(--l-color-3-bx);
}
/* ====== */

/* Цвет 4 */
.designActive.lessonsColor-4 .lesson-list .lesson-card .item-a {
	background: var(--l-color-4);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.designActive.lessonsColor-4 .lesson-list .lesson-card .lesson-wrap .lesson-btn {
	box-shadow: var(--l-color-4-bx);
}
/* ====== */

@media screen and (max-width: 620px) {
	.designActive .lesson-list .lesson-card .item-a {
		padding: 20px;
		border-radius: 18px;
	}

	.designActive .lesson-list .lesson-card .lesson-wrap {
		flex-direction: column;
    	text-align: center;
	}

	.designActive .lesson-list .lesson-card .lesson-wrap .lesson-title {
		width: 100%;
		font-size: 20px;
    	margin-bottom: 24px;
	}
}