/**
 * Hero-kort-grid — oversigt over flere modtagere.
 * Responsivt; mobil-først (1 → 2 → 3 → 5 kolonner, jf. prototype).
 */

.recipient-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tc-gap);
}

@media (min-width: 480px) {
	.recipient-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.recipient-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.recipient-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}