.pico-progressive-skeleton {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 180px;
	margin: 0;
	padding: 0.35rem 0;
	background: var(--pico-color-white);
}

.pico-progressive-skeleton__cards > span {
	display: block;
	background: linear-gradient(100deg, var(--pico-color-gray-100) 20%, var(--pico-color-gray-50) 40%, var(--pico-color-gray-100) 60%);
	background-size: 220% 100%;
	animation: pico-progressive-shimmer 1.6s ease-in-out infinite;
}

.pico-progressive-skeleton__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.pico-progressive-skeleton__cards > span {
	height: 13rem;
	border-radius: 0.65rem;
}

.pico-progressive-reveal {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.pico-progressive-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@keyframes pico-progressive-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@media (max-width: 600px) {
	.pico-progressive-skeleton__cards {
		grid-template-columns: 1fr;
	}

	.pico-progressive-skeleton__cards > span {
		height: 8rem;
	}

	.pico-progressive-skeleton__cards > span:nth-child(n + 3) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pico-progressive-skeleton__cards > span {
		animation: none;
	}

	.pico-progressive-reveal {
		transition: none;
	}
}