@keyframes rgb-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.rgb-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}

.rgb-card::before {
	content: "";
	position: absolute;
	inset: -50%;
	background: conic-gradient(
		from 180deg,
		#ff0040,
		#ff8000,
		#ffff00,
		#80ff00,
		#00ff00,
		#00ff80,
		#00ffff,
		#0080ff,
		#0000ff,
		#8000ff,
		#ff00ff,
		#ff0080,
		#ff0040
	);
	opacity: 0;
	transition: opacity 300ms ease;
	animation: rgb-spin 12s linear infinite;
}

.rgb-card:hover::before {
	opacity: 1;
}

.rgb-card__content {
	position: relative;
	z-index: 1;
	margin: 1px;
	height: calc(100% - 2px);
	border-radius: 15px;
	background: #0f0f11;
}