.contacts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 100vh;
	background: #292929;
	font-family: var(--vk-font);
}

/* Светлая полоса над блоком, когда выше стоит секция на белом фоне */

.contacts--inset {
	/* Полоса не должна съедать высоту карты, поэтому прибавляется к ней */
	min-height: calc(100vh + 15px);
	padding-top: 15px;
	background: #ffffff;
}

.contacts__map {
	position: relative;
	min-width: 0;
	min-height: 320px;
	background: #e6e6e6;
}

/* Второй селектор — для кода карты, вставленного в настройки: у виджета Яндекса
   своя высота в атрибуте (обычно 400), из-за неё карта не добирает высоту блока. */

.contacts__frame,
.contacts__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1);
}

.contacts__body {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 90px;
	background: #292929;
}

.contacts__inner {
	min-width: 0;
}

.contacts__title {
	margin: 0 0 45px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.17;
	color: #ffffff;
	overflow-wrap: anywhere;
}

.contacts__lines {
	margin: 0 0 30px;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.5;
	color: #ffffff;
	overflow-wrap: anywhere;
}

.contacts__lines a {
	color: inherit;
	text-decoration: none;
	transition: color var(--vk-transition);
}

.contacts__lines a:hover {
	color: var(--vk-accent);
}

.contacts__text {
	margin: 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.55;
	color: #ffffff;
	overflow-wrap: anywhere;
}

.contacts :focus-visible {
	outline: 2px solid var(--vk-accent);
	outline-offset: 3px;
}

/* Вариант в контейнере: текст слева, карта справа отдельной плашкой */

.contacts--boxed {
	grid-template-columns: 460fr 660fr;
	gap: 40px;
	min-height: 0;
	max-width: 1200px;
	margin: 0 auto;
	padding: 45px 20px 120px;
	background: #ffffff;
}

.contacts--boxed .contacts__body {
	padding: 0;
	background: transparent;
}

.contacts--boxed .contacts__map {
	height: 550px;
	min-height: 0;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.contacts--boxed .contacts__frame {
	filter: none;
}

.contacts--boxed .contacts__title {
	margin-bottom: 30px;
	color: #000000;
}

.contacts--boxed .contacts__text {
	font-size: 20px;
	line-height: 1.55;
	color: #000000;
}

.contacts--boxed .contacts__text a {
	color: inherit;
	text-decoration: none;
	transition: color var(--vk-transition);
}

.contacts--boxed .contacts__text a:hover {
	color: var(--vk-accent);
}

/* Отступ и просвет задаём от контейнера: общее правило соцсетей шапки идёт
   ниже по каскаду и с той же силой, поэтому одного класса блока не хватает. */
.contacts .contacts__socials {
	margin-top: 30px;
	padding-left: 0;
	gap: 12px;
	color: #ffffff;
}

.contacts--boxed .contacts__socials {
	color: #000000;
}

/* Media */

@media (max-width: 960px) {
	.contacts,
	.contacts--boxed {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.contacts--boxed {
		gap: 35px;
		padding: 35px 20px 70px;
	}

	.contacts--boxed .contacts__map {
		height: 550px;
	}

	.contacts__map {
		height: 50vh;
		min-height: 280px;
	}

	.contacts__body {
		padding: 50px 20px;
	}

	.contacts__title {
		margin-bottom: 30px;
	}

	.contacts__lines {
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	.contacts__title {
		font-size: 24px;
	}

	.contacts__text {
		font-size: 16px;
	}
}