.contacts {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 24px;

	padding-top: 60px;
	height: 516px;
	margin: 0 20px;
	background-color: #26292f;
	position: relative;
	overflow: hidden;
}

/* .contacts__bg-mobile {
	display: none;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

	width: 100vw;
	height: 50%;

	background-image: url('../../images/contacts-bg.svg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
} */

.contacts__bg-desktop {
	position: absolute;
	width: max(1460px, 100%);
	height: max(600px, 50vw);
	z-index: 0;
	bottom: -20%;
	left: 50%;
	transform: translateX(-50%);
}

.contacts__title {
	color: #f7f5f2;
	text-align: center;
	z-index: 1;
}

.contacts__text {
	color: #f7f5f299;
	z-index: 1;
}

.contacts__btn {
	padding: 16px 24px;
	background-color: #d0eaff;
	border-radius: 34px;
	color: #26292f;
	z-index: 1;
	transition: all 0.2s ease-in-out;
}

.contacts__btn:hover {
	background-color: #d0eaffcc;
}

.contacts__btn:visited {
	opacity: 0.4;
}

@media (min-width: 1400px) {
	.contacts__bg-desktop {
		bottom: -30%;
	}
}

@media (min-width: 1600px) {
	.contacts__bg-desktop {
		bottom: -40%;
	}
}

@media (min-width: 1800px) {
	.contacts__bg-desktop {
		bottom: -50%;
	}
}

@media (min-width: 2000px) {
	.contacts__bg-desktop {
		bottom: -60%;
	}
}

@media (max-width: 1024px) {
	.contacts {
		padding-top: 80px;
		height: 549px;
		margin: 20px;
	}

	.contacts__bg-mobile {
		display: block;
		width: 140vw;
		height: 46%;
	}

	.contacts__bg-desktop {
		/* display: none; */
		pointer-events: none;
		bottom: -10%;
	}
}

@media (max-width: 640px) {
	.contacts {
		row-gap: 20px;
		padding-top: 60px;
		padding-inline: 20px;
		height: 543px;
		margin: 12px;
	}

	.contacts__bg-mobile {
		width: 200vw;
		height: 50%;
	}
}