.dc-icon-list {
	--dc-il-icon-size: var(--dc-il-icon-size-desktop);
	--dc-il-grid-gap: var(--dc-il-grid-gap-desktop);
	--dc-il-icon-title-gap: var(--dc-il-icon-title-gap-desktop);
	--dc-il-title-desc-gap: var(--dc-il-title-desc-gap-desktop);
	display: grid;
	grid-template-columns: repeat(var(--dc-il-columns-desktop), minmax(0, 1fr));
	gap: var(--dc-il-grid-gap);
}

.dc-icon-list-item {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	text-align: var(--dc-il-text-align);
	transition: background-color 220ms ease;
}

.dc-icon-list-item.has-bg {
	padding: 32px 24px;
}

.dc-icon-list-item:hover {
	background-color: var(--dc-il-hover-bg);
}

.dc-icon-list-item:hover .dc-icon-list-title {
	color: var(--dc-il-hover-title-color);
}

.dc-icon-list--svg-monochrome .dc-icon-list-item:hover .dc-icon-list-icon {
	color: var(--dc-il-hover-icon-color);
}

.dc-icon-list-item:hover .dc-icon-list-icon i,
.dc-icon-list--svg-monochrome .dc-icon-list-item:hover .dc-icon-list-icon svg {
	color: var(--dc-il-hover-icon-color);
}

.dc-icon-list-icon {
	color: var(--dc-il-icon-color);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--dc-il-icon-size);
	line-height: 1;
	margin-block-end: var(--dc-il-icon-title-gap);
}

.dc-icon-list-icon svg,
.dc-icon-list-icon img {
	block-size: var(--dc-il-icon-size);
	color: inherit;
	flex: 0 0 auto;
	inline-size: auto;
	max-inline-size: none;
	object-fit: contain;
	transition: color 220ms ease;
}

.dc-icon-list--svg-monochrome .dc-icon-list-icon svg :where(path, circle, ellipse, line, polygon, polyline, rect) {
	transition: fill 220ms ease, stroke 220ms ease;
}

.dc-icon-list--svg-monochrome .dc-icon-list-icon svg :where(path, circle, ellipse, polygon, polyline, rect):not([fill]):not([stroke]) {
	fill: currentColor;
}

.dc-icon-list--svg-monochrome .dc-icon-list-icon svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.dc-icon-list--svg-monochrome .dc-icon-list-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.dc-icon-list-icon i {
	color: var(--dc-il-icon-color);
	font-size: var(--dc-il-icon-size);
	transition: color 220ms ease;
}

.dc-icon-list-title {
	color: var(--dc-il-title-color);
	font-family: "Poppins", Arial, sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0 0 var(--dc-il-title-desc-gap);
	text-transform: uppercase;
	transition: color 220ms ease;
}

.dc-icon-list-description {
	color: var(--dc-il-desc-color);
	font-family: "Poppins", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 1024px) {
	.dc-icon-list {
		--dc-il-icon-size: var(--dc-il-icon-size-tablet);
		--dc-il-grid-gap: var(--dc-il-grid-gap-tablet);
		--dc-il-icon-title-gap: var(--dc-il-icon-title-gap-tablet);
		--dc-il-title-desc-gap: var(--dc-il-title-desc-gap-tablet);
		grid-template-columns: repeat(var(--dc-il-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.dc-icon-list {
		--dc-il-icon-size: var(--dc-il-icon-size-mobile);
		--dc-il-grid-gap: var(--dc-il-grid-gap-mobile);
		--dc-il-icon-title-gap: var(--dc-il-icon-title-gap-mobile);
		--dc-il-title-desc-gap: var(--dc-il-title-desc-gap-mobile);
		grid-template-columns: repeat(var(--dc-il-columns-mobile), minmax(0, 1fr));
	}

	.dc-icon-list-item {
		align-items: center;
		text-align: center;
	}
}