.social-headline {
	display: none;
}

.social-links {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
	list-style: none;
	gap: var(--space-3) var(--space-4);
}

.social-links .social-network {
	padding: 0;
}

.social-links a {
	color: inherit;
	font-size: 15px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--red);
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--red);
}

/* begin: override the standard twitter logo with the x version */

.social-links a .fab.fa-x-twitter::before {
	--size: 16px;
	display: block;
	margin-left: 1px;
	content: '';
	background-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="rgb(255, 255, 255)" /></svg>');
	background-size: var(--size) var(--size);
	background-position: 0 0;
	width: var(--size);
	height: var(--size);
}

.panel-header .social-links a .fab.fa-x-twitter::before {
	background-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="rgb(255, 60, 48)" /></svg>');
}

@media (min-width: 64em) {
	.social-links a .fab.fa-x-twitter::before {
		margin-left: 2px;
		--size: 20px;
	}
}

/* end: override the standard twitter logo with the x version */

@media (hover: hover) {
	.social-links a:hover {
		color: var(--red);
	}

	.social-links a:hover .fab.fa-x-twitter::before {
		background-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="rgb(255, 60, 48)" /></svg>');
		color: var(--red);
	}

	.panel-header .social-links a:hover .fab.fa-x-twitter::before {
		background-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" fill="rgb(255, 255, 255)" /></svg>');
	}
}