/**
 * Стили UI-блока: промо приложения «Медэкспресс»
 *
 * @package medexpress-by-fin-code
 */

.me-app-promo {
	position: relative;
	background-color: var(--primary-color);
	background-repeat: no-repeat;
	background-position: 75% 83%;
	background-size: 880px;
	color: #fff;
	overflow: hidden;
}

.me-app-promo__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	gap: 40px;
	min-height: 456px;
}

.me-app-promo__content {
	flex: 0 1 460px;
	max-width: 460px;
	align-self: center;
	padding: 80px 0;
}

.me-app-promo__title {
	color: #fff;
	margin-bottom: 20px;
}

.me-app-promo__text {
	color: #fff;
	text-align: left;
}

.me-app-promo__text .me-app-promo__bullets > li {
	color: #fff;
}

.me-app-promo__text .me-app-promo__bullets > li::before {
	background: #fff;
}

.me-app-promo__stores {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.me-app-promo__media {
	position: relative;
	flex: 1 1 auto;
	width: 700px;
	align-self: stretch;
}

.me-app-promo__phone {
	position: absolute;
	right: calc(30px + 15vw);
	bottom: 0;
	width: 468px;
	max-width: 45vw;
	height: auto;
	pointer-events: none;
}

.me-app-promo__caption {
	position: absolute;
	right: 50px;
	top: 130px;
	margin: 0;
	max-width: 222px;
	font-weight: 500;
	font-size: 32px;
	line-height: 0.92;
	color: #fff;
}

.me-app-promo__caption::before {
	content: "";
	position: absolute;
	left: -24px;
	top: 11px;
	width: 8px;
	height: 6px;
	background-color: #fff;
	clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

@media (max-width: 768px) {
	.me-app-promo {
		background-position: 50% 340px;
		background-size: 720px;
	}

	.me-app-promo__inner {
		flex-direction: column;
		gap: 35px;
		min-height: 0;
	}

	.me-app-promo__content {
		flex: none;
		max-width: 100%;
		align-self: stretch;
		padding: 40px 0 0;
	}

	.me-app-promo__media {
		align-self: stretch;
		min-height: 280px;
		width: 100%;
		max-width: 410px;
		margin-left: auto;
		margin-right: auto;
	}

	.me-app-promo__phone {
		left: -30px;
		width: 360px;
		max-width: 85vw;
		margin-bottom: -25px;
	}

	.me-app-promo__caption {
		top: 0;
		right: 0;
		max-width: 128px;
		font-size: 24px;
	}

	.me-app-promo__caption::before {
		left: -20px;
	}
}