@charset "utf-8";

/* ICONS LIST */
.lists-icons {
	--columns: 1;
	--gap: 0.625rem;
	font-size: var(--text-body);
	margin-block: var(--margin-gap);
	}
.lists-icons-columns-1 {
	display: grid;
	gap: var(--gap);
	}
.lists-icons-inline,
.lists-icons-direction-horizontal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	}
.lists-icons-direction-vertical {
	columns: var(--columns);
	column-gap: var(--gap);
	}
.lists-icons-direction-vertical > * {
	margin-bottom: var(--gap);
	break-inside: avoid;
	}
.lists-icons-direction-vertical > *:last-child {
	margin-bottom: 0;
	}
.lists-icons-item {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1.25rem 1fr;
	line-height: var(--line-height-snug);
	}
.lists-icons-direction-horizontal > .lists-icons-item {
	flex: 0 0 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
	}
.lists-icons-inline > .lists-icons-item {
	flex: 0 0 auto;
	}
.lists-icons-filled .lists-icons-item,
.lists-icons-border .lists-icons-item {
	border-radius: var(--radius);
	padding: 0.625rem;
	}
.lists-icons-filled .lists-icons-item {
	background-color: var(--background-trim);
	}
.lists-icons-border .lists-icons-item {
	border: 1px solid var(--background-trim);
	}
.lists-icons-icon {
	color: var(--color-accent);
	text-align: center;
	}
.lists-icons-header {
	font-weight: var(--lists-header-weight);
	}
@media (min-width: 40em) {
	.lists-icons-columns-2,
	.lists-icons-columns-4 {
		--columns: 2;
		}
}
@media (min-width: 60em) {
	.lists-icons-columns-3 {
		--columns: 3;
		}
}
@media (min-width: 80em) {
	.lists-icons-columns-4 {
		--columns: 4;
		}
}