/* Первый экран акции: текст на cream, фото в край, карточка по центру фото. */

.promo-hero {
	padding: 40px 0 0;
	overflow: hidden;
}

.promo-hero__grid { display: block; }

.promo-hero__copy { padding-inline: var(--gutter); }

.promo-hero__inner { display: grid; gap: 25px; }

.promo-hero__lead { display: grid; gap: 15px; }

.promo-hero__head { display: grid; gap: 10px; }

.promo-hero__eyebrow { font-size: 14px; font-weight: 400; }

.promo-hero__text {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.32;
}

.promo-hero__more { width: 100%; }

.promo-hero__media {
	position: relative;
	height: 364px;
	margin-top: 40px;
	background: var(--c-beige);
}

.promo-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo-hero__card {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: min(320px, calc(100% - 32px));
	padding: 20px;
	border-radius: 10px;
	background: var(--c-cream);
	transform: translate(-50%, -50%);
}

.promo-hero__card-inner { display: grid; gap: 35px; justify-items: start; }

.promo-hero__card-copy { display: grid; gap: 25px; width: 100%; }

.promo-hero__value {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 27px;
	line-height: 0.99;
	letter-spacing: -0.06em;
	text-transform: uppercase;
	color: var(--c-black);
}

.promo-hero__card-text {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.32;
}

@media (min-width: 768px) {
	.promo-hero__media { height: 460px; }
	.promo-hero__more { width: auto; justify-self: start; }
	.promo-hero__text { font-size: 16px; }
}

@media (min-width: 1200px) {
	.promo-hero { padding: 0; }

	.promo-hero__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		min-height: 553px;
	}

	.promo-hero__copy {
		display: flex;
		align-items: center;
		padding: 48px 0 48px max(60px, calc((100vw - 1440px) / 2 + 60px));
	}

	.promo-hero__inner {
		width: min(660px, 100%);
		gap: 35px;
	}

	.promo-hero__lead { gap: 25px; }
	.promo-hero__head { gap: 20px; }
	.promo-hero__eyebrow { font-weight: 500; }
	.promo-hero__text { font-size: 18px; }
	.promo-hero__more { min-height: 52px; }

	.promo-hero__media {
		height: auto;
		min-height: 553px;
		margin-top: 0;
	}

	.promo-hero__value { font-size: 42px; }
	.promo-hero__card-text { font-weight: 500; }
}