.af-social-links {
	--af-gradient-start: #2f8fe9;
	--af-gradient-end: #2ac0a8;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
}

.af-social-link {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: linear-gradient(180deg, var(--af-gradient-start), var(--af-gradient-end));
	color: #ffffff !important;
	text-decoration: none;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.af-social-link:hover,
.af-social-link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 16px rgba(0, 0, 0, 0.22);
}

.af-social-link i,
.af-social-link svg {
	font-size: 20px;
}

.af-social-link svg {
	display: block;
	fill: currentColor;
}

.af-social-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.af-social-link {
		width: 36px;
		height: 36px;
	}

	.af-social-link i,
	.af-social-link svg {
		font-size: 18px;
	}
}