@import url('variables.css');

.card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lg);
	padding: 0 0 var(--xxl) 0;
	margin-bottom: var(--xxl);
	width: 100%;
	box-sizing: border-box;
}
@media (max-width: 1000px) {
	.card-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		grid-template-columns: repeat(8, 1fr);
		overflow-x: auto;
	}
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	text-decoration: none;
	color: white;
	aspect-ratio: 3 / 4;
	min-width: 12.5rem;
}


.card-button {
	position: relative;
	z-index: 1; /* above overlay */
	display: inline-flex;
	align-items: center;
	gap: var(--xs);
	background: var(--sd-color-interactive-default-active);
	color: white;
	padding: var(--sm) var(--lg);
	text-align: center;
	margin: var(--md) auto var(--lg);
	width: fit-content;
	white-space: normal;
	font-size: var(--sd-typography-fontSize-text-sm);
}

.card:hover .card-button {
	background: var(--sd-color-interactive-default-hover);
}

.card-icon {
	width: 1.125rem;
	height: 1.125rem;
	object-fit: contain;
	display: inline-block;
}

.linkList {
	border-bottom: 1px solid var(--sd-color-neutral-light-60);
	padding: 1.5rem 0;
	margin-bottom: 2rem;
}

.linkList a {
	padding-left: 0;
}

.linkList a::before {
	background: none;
}
.filters {
	margin-bottom: var(--xxl);
}
fieldset {
	padding: 0;
	border: none; 
	padding-bottom: var(--xxl);
	margin-bottom: var(--xxl);
}
.category-btn.active:not(:hover) {
	background-color: var(--sd-color-secondary-20);
}
#resetCategories:not(:hover) {
	background-color: var(--sd-color-secondary-20);
}
.textFilter label, fieldset legend {
	font-weight: normal;
	font-size: var(--sd-typography-fontSize-text-sm);
}
.category-btn {
	margin-top: var(--xs);
}