/* Lazy Block: about-media. Vars from base style.css. */

.about {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 48px;
	align-items: center;
}

.about__body p {
	color: var(--body);
	line-height: 1.7;
	margin: 0 0 16px;
}

.about__media {
	position: relative;
	min-height: 320px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(160deg, #1b2a3f, #0e141f);
	background-size: cover;
	background-position: center;
}

.adv {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 48px;
}

.adv__item {
	padding: 22px;
	border: 1px solid var(--hair);
	border-radius: 12px;
	background: #fff;
}

.adv__ico {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.adv__ico svg { width: 22px; height: 22px; }
.adv__t { font-weight: 600; margin: 0 0 6px; color: var(--ink-900); }
.adv__d { font-size: 13.5px; color: var(--body); line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
	.about { grid-template-columns: 1fr; }
	.adv { grid-template-columns: repeat(2, 1fr); }
}