$o-categories-gap: space(2);

.o-categories {

}


.o-categories__title {
	@include font-size(xl);
	@include font-weight('bold');
	margin-bottom: space(3);
}


.o-categories__list {
	list-style: none;
	margin-left: 0;
	display: flex;
	flex-wrap: wrap;
	margin: -$o-categories-gap;
}


.o-categories__item {
	margin: $o-categories-gap;
}


.o-categories__link {
	@include font-weight(bold);
	display: flex;
	align-items: center;
	justify-content: center;
	width: space(24);
	height: space(13);
	color: palette(neutral, 900);
	border: 2px solid currentColor;
	text-decoration: none;
	transition: color 150ms linear,
				border-color 150ms linear;

	&:hover {
		color: palette(action, 500);
	}
}