.tmpl-essential {
	&__banner {
		.banner-carousel {
			max-width: 600px;
			margin: 0 auto;
			padding-bottom: 60px;
			@include media-min($medium) {
				padding-bottom: 80px;
			}
			@include media-min($large) {
				padding-top: 80px;
				padding-bottom: 100px;
			}
		}
		.embla__viewport {
			overflow: hidden;
		}
		.embla__container {
			display: flex;
			align-items: center;
		}

		.embla__slide {
			flex-basis: 100%;
			@include media-min($medium) {
				min-width: 0;
				flex: 0 0 82%;
			}
		}

		.embla__slide:not(.active) .card-stack {
			transform: scale(0.94);
		}

		.embla__slide.active {
			.card-stack {
				transform: scale(1);
			}
			.card {
				padding: 40px 24px;
			}
		}
		.card-stack {
			position: relative;
			transition: transform 0.4s ease, opacity 0.4s ease;
		}

		.card {
			background: #1f2426;
			padding: 20px 36px;
		}
		h3 {
			text-align: center;
			margin-bottom: 16px;
			font-weight: 500;
			font-size: 24px;
			text-align: center;
			span {
				font-weight: 700;
			}
		}
		.meta {
			text-align: center;
			color: #acb9bf;
			margin-bottom: 32px;
			font-weight: 500;
			font-size: 14px;
			line-height: 24px;
		}

		.content {
			padding: 0 24px;
		}

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 16px;
		}

		.save {
			font-weight: 500;
			font-size: 24px;
			line-height: 100%;
			color: #fff;
		}
		.unit {
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			color: #acb9bf;
		}
		.item {
			margin-top: 32px;
		}

		.label {
			font-weight: 500;
			font-size: 14px;
			line-height: 16px;
			color: #fff;
			flex: 1;
			margin-bottom: 20px;
		}

		.price {
			font-weight: 500;
			font-size: 24px;
			line-height: 100%;
			color: #fff;
			width: 100px;
			text-align: right;
		}

		.progress__bar {
			height: 20px;
			width: 0%;
			transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.progress__bar--red {
			background: #dc150b;
		}
		.progress__bar--violet {
			background: #9e4ec4;
		}
		.progress__bar--green {
			background: #1aa8a8;
		}
		.progress__bar--blue {
			background: #2c80ce;
		}
		.progress__bar--gray {
			background: #43494d;
		}

		.embla__slide:not(.is-selected) .progress__bar {
			width: 0%;
		}

		.embla__pagination {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-top: 32px;
			&-button {
				width: 8px;
				height: 8px;
				border-radius: 999px;
				background: #313638;
				border: none;
				cursor: pointer;
				margin: 0;
				transition: all 0.3s;
				&.active {
					width: 80px;
					background: #50585c;
				}
			}
		}
	}
	&__logo-wall {
		.logo-wall-container {
			overflow: hidden;
			max-width: 1004px;
			height: 32px;
			margin-top: 24px;
		}
		h2 {
			font-size: 24px;
		}
		.logo-track {
			width: max-content;
			display: flex;
			animation: logo-scroll 18s linear infinite;
			gap: 16px;
			@keyframes logo-scroll {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-50%);
				}
			}
		}
	}
	&__illustration {
		.cards-container {
			--num-cols: 1;

			display: grid;
			grid-template-columns: repeat(var(--num-cols), 1fr);
			gap: var(--grid-column-gutter);

			@include media-min($medium) {
				--num-cols: 2;
			}
		}
		.card {
			background: #14181a;
			padding: 20px 20px 40px 20px;
			h3 {
				font-weight: 700;
				font-size: 24px;
				line-height: 100%;
			}
			p {
				font-weight: 400;
				font-size: 16px;
				line-height: 22px;
				margin-bottom: 60px;
			}
		}
	}
	&__community {
		.card-text-content {
			padding: 32px 24px;
			&__label {
				color: #9e4ec4;
			}
			.title-mono {
				color: #fff;
			}
			.languages {
				display: flex;
				flex-wrap: wrap;
				gap: 1.6rem;
				margin-top: 20px;
			}
			.language {
				color: #1aa8a8;
				font-family: var(--font-moderat-mono);
				&::before {
					content: "";
					width: 6px;
					height: 6px;
					border-radius: 50%;
					background-color: #1aa8a8;
					margin-right: 6px;
					display: inline-block;
				}
			}
			.tags {
				margin-top: 30px;
				.tag {
					background-color: #000;
					border: 1px solid #10487b;
					border-radius: 16px;
					color: #2c80ce;
					padding: 0 12px;
				}
			}
			.button-group {
				margin-top: 42px;
				justify-content: flex-start;
			}
		}
		.card-container {
			margin: 6.4rem 0;
			display: flex;
			gap: 3.2rem 1.6rem;
			flex-wrap: wrap;
			justify-content: center;
		}
		.card {
			text-align: center;
			flex: 1;
			&-image-container {
				width: 93px;
				height: 93px;
				margin: auto;
			}
			&-title {
				font-size: 72px;
				font-weight: 700;
				line-height: 76px;
				color: #fff;
				margin: 4rem 0 2rem;
			}
			p {
				font-size: 22px;
				font-weight: 300;
				line-height: 28px;
				text-align: center;
				color: #a2adb9;
			}
		}
	}
}