.panel-social {
	position: relative;
	padding: 0 var(--space-5);
	margin-bottom: 50px;
	color: var(--black);
	overflow: hidden;

	.social-inner {
		max-width: 1040px;
		margin: 0 auto;
	}

	.social-header {
		margin-bottom: 30px;
	}

	.social-title {
		margin-bottom: var(--space-5);
		font-family: var(--font-display);
		font-weight: var(--font-weight-normal);
		font-size: 1.75rem;
		line-height: 1.15;
		color: inherit;
	}

	.social-subtitle {
		display: flex;
		align-items: center;
		gap: 9px;
		margin-bottom: var(--space-4);
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-xs);
		line-height: 1.4;
		letter-spacing: 0.2em;
		text-transform: uppercase;

		&::before {
			display: block;
			width: var(--space-10);
			height: 2px;
			content: '';
			background: var(--green);
		}
	}

	.social-links {
		justify-content: start;
		gap: 11px;

		.social-network {
			flex-shrink: 0;
		}

		.social-link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.5rem;
			aspect-ratio: 1;
			padding: 0;
			margin: 0;
			font-size: 1.5625rem;
			line-height: 1;
			text-decoration: none;
			color: var(--white);
			background-color: var(--blue);
			border-radius: var(--rounded-circle);
			border: 1px solid var(--blue);
			transition:
				color var(--transition-appendix),
				background-color var(--transition-appendix);
		}

		.social-icon {
			line-height: 0.8;
		}
	}

	.social-embed {
		position: relative;
		z-index: 2;

		&::before {
			position: absolute;
			inset: 50% auto auto 50%;
			z-index: -1;
			translate: -50% -50%;
			display: block;
			height: 154px;
			max-height: 67%;
			width: 101vw;
			content: '';
			background: url('/includes/client_public/assets/shared/decorations/social-panel-pattern.svg') repeat-x center center / auto 100%;
			pointer-events: none;
		}
	}

	@media (hover: hover) {
		.social-links .social-link:hover {
			color: var(--blue);
			background-color: var(--white);
		}
	}

	@media (min-width: 64em) {
		margin-bottom: 100px;

		.social-header {
			display: flex;
			align-items: end;
			justify-content: space-between;
			margin-bottom: 18px;
		}

		.social-title {
			margin: 0;
			max-width: 352px;
			font-size: var(--text-4xl);
		}

		.social-subtitle {
			font-size: 0.8125rem;
		}

		.social-links {
			justify-content: end;
			margin-bottom: var(--space-3);
		}

		.social-embed::before {
			height: 246px;
		}
	}
}