/* Shared site styles for cards, grids and pills */

a {
	color: inherit;
}

li {
	list-style: none;
}

ul {
	display: flex;
	gap: 24px;
	padding: 0;
}

img {
	display: block;
	border-radius: 8px;
	object-fit: contain;
	aspect-ratio: 1 / 1;
}

ul.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	padding: 0;
	margin: 0 0 1.5rem 0;
}

ul.grid li {
	list-style: none;
}

.card {
	aspect-ratio: 1 / 1;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	display: block;
}

.card img,
.card iframe,
.card video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border: 0;
}

.pill {
	display: inline-block;
	margin: 4px 6px 4px 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: inherit;
	cursor: pointer;
}
.pill:hover {
	background: rgba(255, 255, 255, 0.22);
}