.f-color-chips {
	display: flex;
	flex-wrap: wrap;
}

.f-color-chip {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 100%;
	border-top-width: 8em;
	border-top-style: solid;
	border-bottom-width: 0;
	border-bottom-style: solid;
	background-color: #fff;
	font-size: $dc-body-font-size;
	font-weight: $dc-bold-font-weight;
	padding: 1em;
	margin-bottom: 2em;

	@media (min-width: 60em) {
		flex-basis: 13em;
	}

	.f-color-chip__color {
		background-color: #fff;
		content: attr(data-color);
		font-weight: $dc-normal-font-weight;
		color: $dc-gray40;
	}
}

.f-color-chips {
	display: flex;
	flex-wrap: wrap;
}

.f-color-chip {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 100%;
	border-top-width: 8em;
	border-top-style: solid;
	border-bottom-width: 0;
	border-bottom-style: solid;
	background-color: #fff;
	font-size: $dc-body-font-size;
	font-weight: $dc-bold-font-weight;
	padding: .5em;
	margin-bottom: 2em;
	font-size: 1.2rem;
	line-height: 1.8rem;

	@media (min-width: 60em) {
		flex-basis: 0;
	}

	.f-color-chip__color {
		background-color: #fff;
		content: attr(data-color);
		font-weight: $dc-normal-font-weight;
		color: $dc-gray40;
	}
}

Fix color chips in screen width ~50em
fix(demo): Fix color chips in screen width ~50em