.collection-cards {
	--card-w: 190px;
	--card-h: 275px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
	gap: 12px 12px;
	justify-items: center;
	align-items: start;
	overflow-y: auto;
	padding: 6px 4px;
	border-radius: var(--radius);
	background: var(--surface);
}

.collection-cards {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in oklab, var(--text) 20%, transparent) transparent;
}

.collection-cards::-webkit-scrollbar {
	width: 10px
}

.collection-cards::-webkit-scrollbar-track {
	background: transparent
}

.collection-cards::-webkit-scrollbar-thumb {
	background: color-mix(in oklab, var(--text) 18%, transparent);
	border-radius: 10px;
}

.collection-card {
	position: relative;
	width: var(--card-w);
	max-width: var(--card-w);
	padding: 10px 6px 6px;
	border-radius: 16px;
	cursor: pointer;
	text-align: center;
	transition: transform .12s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease;
	border: 1px solid transparent;
	will-change: transform;
}

.collection-card:hover {
	transform: translateY(-2px);
}

.collection-card[hidden] {
	display: none !important;
}

.collection-card img {
	width: 100%;
	height: var(--card-h);
	border-radius: 14px;
	object-fit: cover;
	object-position: center;
	transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
	border: double 1em transparent;
	border-width: 0;
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
}

.collection-card:hover img {
	filter: brightness(78%);
	transform: perspective(680px) rotateX(7deg) rotateY(7deg);
}

.collection-card-great img {
	border-width: 5px;
	background-image: linear-gradient(var(--surface), var(--surface)),
		linear-gradient(90deg, #23bfe8, #00ff66);
}

.collection-card-best img {
	border-width: 5px;
	background-image: linear-gradient(var(--surface), var(--surface)),
		linear-gradient(90deg, #ffff00, #dd2929);
}

.collection-card p:first-of-type {
	position: absolute;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 6px 8px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45), 0 0 18px rgba(0, 0, 0, .35);
	backdrop-filter: blur(1px);
	border-radius: 12px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 1;
	position: absolute;
	inset: 10px 6px auto 6px;
	height: var(--card-h);
	box-sizing: border-box;
}

.collection-card:hover p:first-of-type {
	opacity: 1;
	visibility: visible
}

.collection-card p:last-of-type {
	position: relative;
	margin: 10px 4px 2px;
	color: var(--text);
	font-weight: 700;
	line-height: 1.25;
	opacity: 1;
	visibility: visible;
	overflow: hidden;
}

.collection-card .badge-bottom {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.collection-card .badge-bottom .chip {
	padding: .25rem .5rem;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	color: #fff;
	background: color-mix(in oklab, var(--brand) 85%, #fff 15%);
	box-shadow: 0 6px 16px color-mix(in oklab, var(--brand) 20%, transparent);
}

.collection-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
	transform: translateY(-1px);
}

.collection-card img {
	display: block;
}

.collection-card img {
	--trim: 2px;
	clip-path: inset(var(--trim) round 14px);
}

@media (max-width: 575.98px) {
	.collection-cards {
		--card-w: 44vw;
		--card-h: calc(44vw * 1.45);
		gap: 10px
	}
}

@media (max-width: 380px) {
	.collection-cards {
		--card-w: 46vw;
		--card-h: calc(46vw * 1.45)
	}
}

@property --border-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes border-spin {
	to { --border-angle: 1turn; }
}

.collection-card-great img,
.collection-card-best img {
	border: 5px solid transparent;
	background-clip: padding-box, border-box;
	background-image:
		linear-gradient(var(--surface), var(--surface)),
		conic-gradient(from var(--border-angle), transparent 0deg, transparent 0deg);
	animation: border-spin var(--border-speed, 6s) linear infinite;
	--trim: 0;
	clip-path: inset(0 round 14px);
}

.collection-card-great img {
	--border-speed: 1s;
	background-image:
		linear-gradient(var(--surface), var(--surface)),
		conic-gradient(from var(--border-angle),
		#23bfe8 0deg, #00ff66 120deg, #23bfe8 360deg);
}

.collection-card-best img {
	--border-speed: 1s;
	background-image:
		linear-gradient(var(--surface), var(--surface)),
		conic-gradient(from var(--border-angle),
		#ffff00 0deg, #dd2929 180deg, #ffff00 360deg);
}