/*    41. ANIMATED GRADIENT BORDER
   ------------------------------------------- */
.gradient-border {
	position: relative;
}

.gradient-border::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		var(--color-accent),
		var(--color-purple-light),
		var(--color-accent)
	);
	background-size: 200% 200%;
	animation: gradient-shift 4s ease-in-out infinite alternate;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}