section.category {
	margin-bottom: 30px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 20px;
}

@media only screen and (min-width: 40.0625em) {
	section.category {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media only screen and (min-width: 78.1875em) {
	section.category {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

a.category_button {
	--button-height: 42px;
	--image-margin: 2px;
	--image-size: 80%;

	height: var(--button-height);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: #3D3D3D;
	border: none;
	cursor: pointer;
	vertical-align: middle;
	width: 100%;
	border-radius: calc(var(--button-height) / 2);
	text-decoration: none;
}

a.category_button:hover {
	background-color: #787878;
}

a.category_button > .category_icon {
	height: calc(var(--button-height) - calc(2 * var(--image-margin)));
	width: calc(var(--button-height) - calc(2 * var(--image-margin)));
	margin: 0 15px 0 var(--image-margin);
	display: inline-block;
	vertical-align: middle;
	border-radius: calc(var(--button-height) / 2);
	background-size: var(--image-size);
	background-position: center;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
}

a.category_button > .category_name {
	display: inline-block;
	vertical-align: middle;
	flex-grow: 1;
	color: #FFFFFF;
}

/*Remove :hover effect because the element functions as filter button*/
.content_main.content_landing_page a.category_button:hover {
	background-color: #3D3D3D;
}