.panel-social {
	margin: var(--space-10) auto;

	--title-text-mobile: var(--font-weight-bold) 40px/120% var(--font-body);
	--title-text-tablet: var(--font-weight-bold) 50px/120% var(--font-body);
	--title-text-desktop: var(--font-weight-bold) 60px/120% var(--font-body);
	--description-text-mobile: var(--font-weight-normal) var(--text-base)/var(--leading-normal) var(--font-body);
	--description-text-tablet: var(--font-weight-normal) var(--text-xl)/var(--leading-normal) var(--font-body);
}

.panel-social .social-header {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 var(--space-5);
	max-width: var(--width-base);
}

@media screen and (min-width: 40em) {
	.panel-social .social-header {
		margin: 0 auto var(--space-5) auto;
	}
}

.panel-social .social-header .header-cont {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-10);
	max-width: 736px;
	text-align: center;
}

.panel-social .social-header .header-cont .title-container {
	font: var(--title-text-mobile);
	color: var(--text-color);
	letter-spacing: 0.8px;
}

@media screen and (min-width: 40em) {
	.panel-social .social-header .header-cont .title-container {
		font: var(--title-text-tablet);
		letter-spacing: 1px;
	}
}

@media screen and (min-width: 64em) {
	.panel-social .social-header .header-cont .title-container {
		font: var(--title-text-desktop);
		letter-spacing: 1.2px;
	}
}

.panel-social .social-header .header-cont .description-container {
	font: var(--description-text-mobile);
	color: var(--gray-dark);
	letter-spacing: 0.2px;
}

@media screen and (min-width: 40em) {
	.panel-social .social-header .header-cont .description-container {
		font: var(--description-text-tablet);
		letter-spacing: 0.4px;
	}
}