.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	grid-gap: var(--spacing-10);

	@media (width > 768px) {
		gap: var(--spacing-20);
	}

	.archive &,
	.blog &,
	.search-results & {
		margin-block: var(--spacing-10);

		@media (width > 768px) {
			margin-block: var(--spacing-40);
		}
	}
}