.content-grid .content-grid__card[data-active="false"] {
	display: none;
}

/* All styles below are not required for the functionality of the filters and are only used for layout */

axial-filters .axial-filters__wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 80px auto;
	width: 100%;
	max-width: 1440px;
}

.content-grid {
	max-width: 1440px;
	width: 100%;
	margin: 80px auto;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

#reset-filters {
	background: black;
	width: 48px;
	aspect-ratio: 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.content-grid .content-grid__card {
	width: 100%;
	aspect-ratio: 1 / 1;
	grid-column: span 1;
}

#no-result-found {
	text-align: center;
	margin: 80px auto;
}

.content-grid .content-grid__card[data-color="red"] {
	background: lightcoral;
}
.content-grid .content-grid__card[data-color="green"] {
	background: lightgreen;
}
.content-grid .content-grid__card[data-color="blue"] {
	background: lightcyan;
}
.content-grid .content-grid__card[data-color="yellow"] {
	background: lightyellow;
}

.content-grid .content-grid__card[data-shape="circle"] {
	border-radius: 50%;
}

.content-grid .content-grid__card[data-shape="triangle"] {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.hidden {
	display: none;
}