.panel-social {
	position: relative;
	margin-bottom: 60px;
	text-align: center;
	color: var(--gray-dark);
}

.panel-social .header {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 0 10px;
	margin-bottom: 38px;
}

.panel-social .title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-family: var(--font-barlow-condensed);
	font-weight: bold;
	font-size: 7.5rem;
	line-height: 1;
	text-transform: uppercase;
	text-shadow:
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px 2px 0 #000,
		2px 2px 0 #000;
	color: var(--white);
}

.panel-social .social {
	position: relative;
	z-index: 2;
	margin-top: -30px;
}

.panel-social .content-cont {
	position: relative;
	z-index: 3;
}

.panel-social .content-inner {
	max-width: var(--width-comfortable);
	margin: 0 auto;
}

.panel-social .content-cont::before {
	position: absolute;
	inset: -16px -10px -38px;
	z-index: -1;
	display: block;
	content: '';
	background: linear-gradient(to top, #fff, #fff 90%, rgba(255, 255, 255, 0));
	pointer-events: none;
}

.panel-social .hashtag {
	margin: 0;
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 1.3125rem;
	line-height: 1;
	color: inherit;
}

.panel-social .desc {
	margin: 10px 0 0;
	font-family: var(--font-body);
	font-weight: normal;
	font-size: var(--text-base);
	line-height: 1.5;
	color: inherit;
}

.panel-social .feed-cont {
	position: relative;
	z-index: 2;
}

@media (min-width: 64em) {
	.panel-social {
		margin-bottom: 110px;
	}

	.panel-social .header {
		gap: 70px;
	}

	.panel-social .content-cont::before {
		top: -32px;
	}

	.panel-social .title {
		font-size: 18.75rem;
	}

	.panel-social .social {
		margin-top: -118px;
	}

	.panel-social .hashtag {
		font-size: 1.8125rem;
	}

	.panel-social .desc {
		font-size: var(--text-lg);
	}
}