// Skeleton loader styles
@keyframes shimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

.rank-math-related-skeleton {
	display: grid;
	gap: 1rem;
	padding: 1rem 0;

	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

	&-item {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		background: #fff;


		.rank-math-related-skeleton-thumb,
		.rank-math-related-skeleton-title,
		.rank-math-related-skeleton-title-line,
		.rank-math-related-skeleton-line {
			background: linear-gradient(
				to right,
				#f0f0f0 0%,
				#e0e0e0 20%,
				#f0f0f0 40%,
				#f0f0f0 100%
			);
			background-size: 800px 100px;
			animation: shimmer 1.5s infinite linear;
			border-radius: 4px;
		}

		.rank-math-related-skeleton-thumb {
			width: 100%;
			height: 150px;
			flex-shrink: 0;
		}

		.rank-math-related-skeleton-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.rank-math-related-skeleton-title {
			height: 20px;
			width: 80%;
		}

		.rank-math-related-skeleton-title-line {
			height: 20px;
			width: 60%;
		}

		.rank-math-related-skeleton-excerpt {
			margin-top: 8px;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.rank-math-related-skeleton-line {
			height: 14px;
			width: 100%;
		}
	}
}