.panel-social {
	position: relative;
	z-index: 2;
	max-width: 1224px;
	padding: var(--space-4) var(--space-8) 0;
	margin: 0 auto 60px;
	color: var(--blue-dark);

	&::before {
		position: absolute;
		inset: 0 10px 162px 56px;
		z-index: -1;
		display: block;
		content: '';
		background: var(--teal-light-2);
		pointer-events: none;
	}

	.content {
		max-width: var(--width-compact);
		margin-bottom: 47px;
	}

	.title {
		margin-bottom: 6px;
		line-height: 1;
		color: inherit;
	}

	.title-script,
	.title-serif {
		display: block;
	}

	.title-script {
		margin-bottom: 5px;
		font-family: var(--font-script);
		font-weight: var(--font-weight-bold);
		font-size: 2.5rem;
		line-height: 1;
	}

	.title-serif {
		translate: -18px;
		font-family: var(--font-display);
		font-weight: var(--font-weight-black);
		font-size: 2.875rem;
		line-height: calc(21/23);
	}

	.desc {
		margin-bottom: 14px;
		font-family: var(--font-body);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-lg);
		line-height: calc(14/9);
		color: inherit;
	}

	@media (min-width: 64em) {
		display: grid;
		grid-template-columns: 425px minmax(0, 1fr);
		align-items: start;
		gap: 36px;
		padding-top: 54px;
		margin-bottom: 127px;

		&::before {
			inset: 0 0 67px 78px;
		}

		.content {
			max-width: none;
		}

		.title {
			margin-bottom: 18px;
		}

		.title-script {
			margin-bottom: 10px;
			font-size: 3.75rem;
		}

		.title-serif {
			font-size: 4.375rem;
		}

		.desc {
			margin-bottom: var(--space-8);
			font-size: var(--text-xl);
			line-height: 1.45;
		}

		.social-embed {
			margin-top: var(--space-2);
		}
	}

	@media (min-width: 90em) {
		&::before {
			right: -25px;
		}

		.title-serif {
			translate: -42px;
		}
	}
}