.lupi-info-cards {
	--lupi-info-cards-gap-desktop: 4px;
	--lupi-info-cards-gap-tablet: 8px;
	--lupi-info-cards-gap-mobile: 16px;
	--lupi-info-cards-card-bg: #ffffff;
	--lupi-info-cards-card-radius: 8px;
	--lupi-info-cards-card-padding-x: 16px;
	--lupi-info-cards-card-padding-y: 16px;
	--lupi-info-cards-icon-bg: #e9e9e9;
	--lupi-info-cards-icon-wrap: 56px;
	--lupi-info-cards-icon-size: 32px;
	--lupi-info-cards-title-color: #101010;
	--lupi-info-cards-description-color: #515151;
	--lupi-info-cards-cta-color: #101010;

	width: 100%;
	display: block;
}

.lupi-info-cards,
.lupi-info-cards *,
.lupi-info-cards *::before,
.lupi-info-cards *::after {
	box-sizing: border-box;
}

.lupi-info-cards :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}

.lupi-info-cards :where(ul, ol) {
	list-style: none;
}

.lupi-info-cards :where(a) {
	color: inherit;
}

.lupi-info-cards :where(button) {
	font: inherit;
}

.lupi-info-cards img,
.lupi-info-cards svg {
	max-width: none;
	border: 0;
	vertical-align: middle;
}

.lupi-info-cards__wrapper {
	width: 100%;
	min-width: 0;
}

.lupi-info-cards__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lupi-info-cards-gap-desktop);
	align-items: stretch;
	width: 100%;
	min-width: 0;
	scroll-behavior: smooth;
	cursor: default;
}

.lupi-info-cards__track.is-scrollable {
	cursor: grab;
}

.lupi-info-cards__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.lupi-info-cards__track.is-dragging,
.lupi-info-cards__track.is-dragging * {
	user-select: none;
	-webkit-user-select: none;
}

.lupi-info-cards__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	max-width: 100%;
	padding: var(--lupi-info-cards-card-padding-y) var(--lupi-info-cards-card-padding-x);
	border-radius: var(--lupi-info-cards-card-radius);
	background: var(--lupi-info-cards-card-bg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}

.lupi-info-cards__icon-wrap {
	width: var(--lupi-info-cards-icon-wrap);
	height: var(--lupi-info-cards-icon-wrap);
	display: grid;
	place-items: center;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--lupi-info-cards-icon-bg);
	flex: 0 0 auto;
}

.lupi-info-cards__icon-media {
	display: block;
	width: var(--lupi-info-cards-icon-size);
	height: var(--lupi-info-cards-icon-size);
	object-fit: contain;
}

.lupi-info-cards__title {
	margin-bottom: 14px;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--lupi-info-cards-title-color);
}

.lupi-info-cards__description {
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--lupi-info-cards-description-color);
}

.lupi-info-cards__cta {
	all: unset;
	box-sizing: border-box;
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--lupi-info-cards-cta-color);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.15;
	cursor: pointer;
}

.lupi-info-cards__cta-arrow {
	display: inline-flex;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.lupi-info-cards__cta-arrow svg {
	display: block;
	width: 15px;
	height: 15px;
}

.lupi-info-cards__empty {
	width: 100%;
	padding: 32px 24px;
	border: 1px dashed #d1d5db;
	border-radius: 16px;
	color: #4b5563;
	background: #f9fafb;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.lupi-info-cards__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lupi-info-cards-gap-tablet);
	}
}

@media (max-width: 767px) {
	.lupi-info-cards__wrapper {
		overflow: hidden;
	}

	.lupi-info-cards__track {
		display: flex;
		gap: var(--lupi-info-cards-gap-mobile);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x;
		padding-bottom: 20px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.lupi-info-cards__track::-webkit-scrollbar {
		display: none;
	}

	.lupi-info-cards__card {
		flex: 0 0 75%;
		min-height: 96px;
		max-width: 75%;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}