Template:Reagent cards/styles.css

.reagents-list {
	--gap: 1rem;
	
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.reagents-list > .reagent-card {
	box-sizing: border-box;
	margin: 0;
}

@media (max-width: 900px) {
	.reagents-list > .reagent-card {
		flex-grow: 1;
	}
}

@media (min-width: 900px) {
	.reagents-list > .reagent-card {
		box-sizing: border-box;
		--flex-basis: calc(50% - var(--gap) / 2);
		flex-basis: var(--flex-basis);
	}
}