.contacts-page {
	font-size: var(--font-size-xl);
	flex: 1;
	padding-block: 20px 57px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

@media only screen and (max-width: 768px) {
	.contacts-page {
		font-size: var(--font-size);
		padding-block: 24px;
	}
}

.contacts-page__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contacts-page__main-title {
    font-size: var(--font-size-3xl);
}

.contacts-page__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 42px;

	@media only screen and (max-width: 990px) {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: unset;
	}
}

.contacts-page__grid-item {
	width: 100%;
	display: flex;
	background-color: var(--bg-color);
	flex-direction: column;
}

.contacts-page__grid-item-image {
	height: 295px;
	display: flex;
	justify-content: center;
	align-items: end;
}

.contacts-page__grid-item-image svg {
	@media only screen and (max-width: 445px) {
		width: 80%;
		height: auto;
		max-height: 80%;
	}
}

.contacts-page__grid-item-content {
	padding: 24px 20px;
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
}

.contacts-page__grid-item-title {
	color: #007287;
	font-size: var(--font-size-l);
	font-weight: 700;
}

.contacts-page__grid-item-text {
	color: var(--gray-800);
	font-size: var(--font-size-m);
}

.contacts-page--link {
	color: var(--link-color)
}

.contacts-page--ol {
	list-style: decimal;
	padding-left: 20px;
}

.contacts-page__info {
	padding: 24px;
	background-color: var(--white);
	font-size: var(--font-size-xl);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.contacts-page__info--symptomato {
	font-size: var(--font-size-3xl);
	font-weight: 700;
	margin-bottom: 12px;
}