body[data-color-scheme="light"] {
	--skeleton-color: #f2f2f2;
	--skeleton-loader-color: #e0e0e0;
}

body[data-color-scheme="dark"] {
	--skeleton-color: #333;
	--skeleton-loader-color: #444;
}

@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 200px 0;
	}
}

.skeleton {
	min-height: 315px;
}

.skeleton-icon,
.skeleton-title,
.skeleton-copy,
.skeleton-link {
	display: block;
	background-color: #f2f2f2;
	background-image: linear-gradient(to right, var(--skeleton-color) 0%, var(--skeleton-loader-color) 50%, var(--skeleton-color) 100%);
	background-size: 200px 100%;
	animation: shimmer 3s infinite linear;
}

.skeleton-icon {
	width: 52px;
	height: 52px;
	border-radius: 100%;
	margin-bottom: 10px;
}

.skeleton-title {
	width: 70%;
	height: 20px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.skeleton-copy {
	width: 90%;
	height: 14px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.skeleton-link {
	width: 50%;
	height: 18px;
	border-radius: 4px;
	margin-bottom: 0;
}