.filter-grid-block {
	& .category-filters {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		margin-bottom: 1rem;

		& .filter-btn {
			border-radius: 2rem;
			box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
			padding: 5px 13px;
			font-weight: 600;
			text-decoration: none;
			background-color: var(--wp--preset--color--gray);
			color: var(--wp--preset--color--black);

			& span {
				margin-right: 0.25rem;
			}
		}
	}
	& .category-filters.geschmacksachen {
		& span {
			color: var(--geschmacksachen-color);
		}
		& .filter-btn.active {
			background-color: var(--geschmacksachen-color);
			color: #fff;
			& span {
				color: var(--wp--preset--color--black);
			}
		}
		
	}
	& .category-filters.pressemitteilungen {
		& span {
			color: var(--pressemitteilungen-color);
		}
		& .filter-btn.active {
			background-color: var(--pressemitteilungen-color);
			color: #fff;
			& span {
				color: var(--wp--preset--color--black);
			}
		}
		
	}

	& .category-filters.revierverhalten {
		& span {
			color: var(--revierverhalten-color);
		}
		& .filter-btn.active {
			background-color: var(--revierverhalten-color);
			color: #fff;
			& span {
				color: var(--wp--preset--color--black);
			}
		}
	}
	& .category-filters.stadtgeschichten {
		& span {
			color: var(--stadtgeschichten-color);
		}
		& .filter-btn.active {
			background-color: var(--stadtgeschichten-color);
			color: #fff;
			& span {
				color: var(--wp--preset--color--black);
			}
		}
		
	}
	& .filter-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--global-kb-gap-md, 2rem);
	}
}

@media (max-width: 768px) {
	.filter-grid-block {
		& .category-filters {
			flex-wrap: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			-ms-overflow-style: none;

			&::-webkit-scrollbar {
				display: none;
			}

			& .filter-btn {
				flex: 0 0 auto;
				white-space: nowrap;
			}
		}
	}

	.filter-grid {
		grid-template-columns: 1fr !important;
	}
}