:root {
	--contactsCardImageSize: 80px;
}

.contacts-body {
	display: block;
	max-width: var(--viewSize);
	margin: 0 auto;
	padding: 30px 0px 30px 0px;
}

.contacts-title {
	color: var(--textColor);
	width: 100%;
	padding-bottom: 10px;
}

.contacts-content {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 24px;
}

.contacts-cards {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 320px;
	gap: 30px;
}

.contacts-cards-image {
	width: var(--contactsCardImageSize);
	height: var(--contactsCardImageSize);
	border-radius: 50%;
	/* border: 2px solid var(--accentСolor); */
	border: 2px solid var(--textColor);
	overflow: hidden;
	flex: 0 0 auto;
}

.contacts-cards-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.contacts-cards-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.contacts-cards-role {
	font-size: 0.9em;
	color: var(--textColor);
	opacity: 0.7;
	margin-top: -8px;	/* уменьшение отступа от имени */
}

.contacts-cards-content a,
.contacts-cards-content a:visited {
	color: var(--textColor);
}

.contacts-cards-content a:hover {
	color: var(--accentColor);
}

@media (max-width: 768px) {
	.contacts-content {
		flex-direction: column;
		align-items: center;
	}

	.contacts-title {
		text-align: center;
	}

}