/* Первый экран. Мобилка 375 — колонка, десктоп 1440 — 650/650. */

.hero__grid { display: grid; gap: 40px; }
.hero__content { display: grid; gap: 30px; align-content: center; }
.hero__main { display: grid; gap: 25px; }
.hero__copy { display: grid; gap: 15px; }
.hero__head { display: grid; gap: 10px; }
.hero__eyebrow { font-size: 14px; font-weight: 400; }
.hero__actions { display: grid; gap: 10px; }
.hero__actions .button { width: 100%; }

.hero__facts {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	gap: 10px 14px;
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid rgba(48, 48, 48, 0.31);
}
.hero__fact {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.32;
	color: rgba(48, 48, 48, 0.39);
}

.hero__media {
	border-radius: 10px;
	overflow: hidden;
	background: var(--c-beige);
}
.hero__img {
	width: 100%;
	height: auto;
	aspect-ratio: 343 / 289;
	object-fit: cover;
	object-position: center;
}
.hero--service .hero__media {
	border-radius: 0;
	overflow: visible;
	background: transparent;
}
.hero--service .hero__img {
	aspect-ratio: auto;
	object-fit: contain;
	background: transparent;
}

@media (min-width: 768px) {
	.hero__grid:has(.hero__media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 20px;
		align-items: center;
	}
	.hero__actions { display: flex; flex-wrap: wrap; gap: 20px; }
	.hero__actions .button { width: auto; }
	.hero__img { aspect-ratio: 650 / 453; }
	.hero--service .hero__img { aspect-ratio: auto; }
}

@media (min-width: 1200px) {
	.hero__content { gap: 35px; }
	.hero__main { gap: 35px; }
	.hero__copy { gap: 25px; }
	.hero__head { gap: 20px; }
	.hero__eyebrow { font-weight: 500; }
	.hero__title { max-width: 498px; }
	.hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0 40px;
		width: fit-content;
		max-width: 100%;
		padding-top: 15px;
	}
	.hero__fact { font-weight: 500; font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.hero__fact { font-size: 14px; }
}

/* Cutout оборудования на мобилке: кадр макета 343×189 */
@media (max-width: 767px) {
	.hero--service .hero__img { width: 100%; aspect-ratio: 343 / 189; object-fit: cover; object-position: 50% 62%; }
}