.cards {
	display: grid;
	list-style: none;
	padding: unset;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(0, 20em));
	/* I wish I could do this in certain situations.
	 * Card sections that need to wrap should be centered, but ones that fit on one line could be left-aligned. */
	/* aah i keep enabling and disabling this i don't know what to dooooo */
	/* justify-content: center; */
	font-size: 0.875rem;
}

.cards > li > * {
	height: 100%;
}

/* TODO: Allow grouping cards like what Bootstrap allows you to do */
.cards .card {
	display: block;
	line-height: 1.5;
	overflow: auto;
	text-decoration: inherit;
	color: inherit;
	background-color: var(--cn-card-bg-color);
	border: var(--cn-border-common) var(--cn-card-border-color);
	border-radius: var(--cn-border-radius);
	box-shadow: var(--cn-box-shadow);
}

/* TODO: Perhaps a "stretched link" system like Bootstrap has */
.cards .card.link:hover {
	background-color: var(--cn-card-hover-bg-color);
	border: var(--cn-border-common) var(--cn-card-hover-border-color);
}

.cards .card .card-image {
	display: block;
	width: 100%;
	background-color: var(--cn-card-img-bg-color);
	object-fit: contain;
	box-sizing: border-box;
	margin: auto;
	/* this'd be cool if this perfectly fit a square, but then the cards are a bit bigger than i'd like them to be. gah */
	max-height: 15em;
}

.cards .card .card-body {
	padding: 1em;
}

.cards .card .card-body > * {
	margin: 0;
}

.cards .card .card-heading {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 0.25em;
}