/* ===================================
   DX Icon Liste
=================================== */

.dx-icon-list {
	position: relative;
	color: var(--color-text);
	background: var(--color-bg-soft);
}

.dx-icon-list__container {
	padding-top: clamp(1.6rem, 2.8vw, 2.8rem);
	padding-bottom: clamp(1.6rem, 2.8vw, 2.8rem);
}

.dx-icon-list__intro {
	margin-bottom: 1.4rem;
	max-width: 54rem;
}

.dx-icon-list__title {
	margin: 0;
	color: var(--color-tertiary);
}

.dx-icon-list__text {
	margin: 0.7rem 0 0;
	color: var(--color-text-alt);
}

.dx-icon-list__swiper {
	overflow: hidden;
}

.dx-icon-list__track.swiper-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	transform: none;
}

.dx-icon-list__item.swiper-slide {
	height: auto;
}

.dx-icon-list__item {
	position: relative;
	min-width: 0;
}

.dx-icon-list__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: var(--color-black-10);
}

.dx-icon-list__card {
	display: grid;
	grid-template-columns: 2.95rem minmax(0, 1fr);
	gap: 1.35rem;
	align-items: start;
	padding: 0.4rem 2.35rem;
	min-height: 7rem;
	color: inherit;
	text-decoration: none;
}

.dx-icon-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.dx-icon-list__icon svg,
.dx-icon-list__icon .ti {
	width: 2.8rem;
	height: 2.8rem;
	color: var(--color-primary);
	stroke: var(--color-primary);
}

.dx-icon-list__body {
	display: block;
}

.dx-icon-list__item-title {
	display: block;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-text);
}

.dx-icon-list__item-text {
	display: block;
	margin-top: 0.15rem;
	line-height: 1.4;
	color: var(--color-text-alt);
}

@media (max-width: 1399.98px) {
	.dx-icon-list__item:not(:last-child)::after {
		top: 0.8rem;
		bottom: 0.8rem;
	}

	.dx-icon-list__card {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.9rem;
		padding-inline: 1.7rem;
	}

	.dx-icon-list__body {
		text-align: center;
	}
}

@media (max-width: 767.98px) {
	.dx-icon-list__swiper {
		overflow: visible;
	}

	.dx-icon-list__track.swiper-wrapper {
		display: flex;
		align-items: stretch;
		gap: 0;
		transform: none;
	}

	.dx-icon-list__item.swiper-slide {
		width: min(84vw, 22rem);
		display: flex;
		height: auto;
	}

	.dx-icon-list__item::after {
		display: none;
	}

	.dx-icon-list__card {
		padding: 1.4rem;
		border: 1px solid var(--color-black-08);
		border-radius: 0.8rem;
		background: var(--color-white);
		min-height: 8.4rem;
		height: 100%;
		width: 100%;
	}
}