Template:Reagent cards/styles.css

From Space Station 14 Wiki
Revision as of 15:35, 26 May 2025 by Aliser (talk | contribs) (media query between flex grow (1 col) and flex basis (2 (or more?) cols) - someone with a wide monitor or just big monitor but small scale please test that it looks okay)
.reagents-list {
	--gap: 1rem;
	
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

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

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

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