.yandex-map {
	width: 1438px;
	height: 539px;
	background-color: #111111;
	border: 1px solid #3c3c3c;
	display: flex;
	gap: 15.6px;
}

@media (max-width: 480px) {
	.yandex-map {
		display: flex;
		flex-direction: column;
		gap: 0px;
		/* На телефоне контент в колонку и выше 539px — высота по контенту,
		   иначе кнопки и карта вылезают за секцию и обрезаются контейнером */
		width: 440px;
		height: auto;
		padding-bottom: 4px;
	}
}

.yandex-text {
	display: flex;
	flex-direction: column;
	margin-top: 72px;
	margin-left: 33px;
}

@media (max-width: 480px) {
	.yandex-text {
		margin-top: 22px;
		margin-left: 54px;
	}
}

.yandex-text h3 {
	margin: 0;
	color: white;
	font-family: "Vetrino";
	font-size: 48px;
	font-weight: 50;
}

@media (max-width: 480px) {
	.yandex-text h3 {
		font-size: 34px;
	}
}

.yandex-text p {
	margin: 0;
	width: 627px;
	height: 220px;
	color: #4c4c4c;
	font-family: "SF Pro Display";
	font-size: 16px;
	margin-top: 32px;
}

@media (max-width: 480px) {
	.yandex-text p {
		text-align: justify;
		width: 330px;
		/* Высота по тексту: на реальных телефонах шрифт рендерится чуть выше,
		   и при фиксированных 374px текст наезжал на кнопки */
		height: auto;
	}
}

.yandex-btn {
	display: flex;
	gap: 20px;
	margin-left: 33px;
	margin-top: 35px;
}

@media (max-width: 480px) {
	.yandex-btn {
		margin-top: 26px;
		margin-left: 80px;
	}
}

.btn-map {
	cursor: pointer;
	width: 147px;
	height: 36px;
	background-color: #202020;
	border: 1px solid #2f2f2f;
	border-radius: 8px;
	color: #bebebe;
	font-family: "SF Pro Display";
	font-size: 16px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition:
		color 0.8s ease,
		border 0.8s ease;
}

.btn-map:hover {
	color: white;
	border: 1px solid white;
}

.img-map img {
	width: 762px;
	height: 539px;
}

@media (max-width: 480px) {
	.img-map img {
		width: 439px;
		height: 311px;
		margin-top: 43px;
	}
}