/* MagicKit - Feature List */
.mk-flist {
	--mk-flist-box: 52px;
	--mk-flist-gap: 28px;
	--mk-conn-color: color-mix(in srgb, var(--mk-primary) 30%, transparent);
	--mk-conn-style: solid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-flist__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	transition: all var(--mk-speed) ease;
}

.mk-flist__item:not(:last-child) {
	margin-bottom: var(--mk-flist-gap);
}

.mk-flist-pos-right .mk-flist__item {
	flex-direction: row-reverse;
	text-align: right;
}

.mk-flist__icon {
	position: relative;
	z-index: 1;
	display: grid;
	flex: 0 0 var(--mk-flist-box);
	place-items: center;
	width: var(--mk-flist-box);
	height: var(--mk-flist-box);
	border-radius: 50%;
	background: var(--mk-soft);
	color: var(--mk-primary);
	font-size: calc(var(--mk-flist-box) * 0.4);
	transition: all var(--mk-speed) ease;
}

.mk-flist__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mk-flist-shape-square .mk-flist__icon {
	border-radius: 14px;
}

.mk-flist-shape-rhombus .mk-flist__icon {
	border-radius: 10px;
	transform: rotate(45deg) scale(0.8);
}

.mk-flist-shape-rhombus .mk-flist__icon > * {
	transform: rotate(-45deg);
}

.mk-flist-shape-none .mk-flist__icon {
	background: none !important;
	width: auto;
	flex-basis: auto;
}

.mk-flist__item:hover .mk-flist__icon {
	background: var(--mk-primary);
	color: #fff;
}

.mk-flist-connector-yes .mk-flist__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: var(--mk-flist-box);
	bottom: calc(var(--mk-flist-gap) * -1);
	left: calc(var(--mk-flist-box) / 2);
	border-left: 2px var(--mk-conn-style) var(--mk-conn-color);
	transform: translateX(-1px);
}

.mk-flist-pos-right.mk-flist-connector-yes .mk-flist__item:not(:last-child)::before {
	left: auto;
	right: calc(var(--mk-flist-box) / 2);
	transform: translateX(1px);
}

.mk-flist__body {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

.mk-flist__title {
	margin: 0 0 6px;
	color: var(--mk-dark);
	font-size: 18px;
	transition: color var(--mk-speed) ease;
}

.mk-flist__title a {
	color: inherit;
	text-decoration: none;
}

.mk-flist__desc {
	margin: 0;
	color: var(--mk-text);
}