.hvl-rules {
	--rules-cols: 3;
	--rules-gap: 32px;
	--rules-line: var(--e-global-color-brume_200, #dde7ef);
	--rules-brand: var(--e-global-color-primary, #08739f);
	--rules-soft: var(--e-global-color-azur_50, #eef8fd);
	--rules-soft-2: var(--e-global-color-brume_100, #eef4f8);
	--rules-ink: var(--e-global-color-text, #14161d);
	--rules-mute: var(--e-global-color-gris, #6a6f7d);
	display: grid;
	gap: 0 var(--rules-gap);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: normal;
}

.hvl-rules--dark {
	--rules-line: rgba(255, 255, 255, 0.16);
	--rules-ink: var(--e-global-color-blanc, #fff);
	--rules-mute: rgba(243, 246, 248, 0.78);
	--rules-brand: var(--e-global-color-accent, #38b0db);
}

.hvl-rules *,
.hvl-rules *::before,
.hvl-rules *::after {
	box-sizing: border-box;
}

@media (min-width: 900px) {
	.hvl-rules {
		grid-template-columns: repeat(var(--rules-cols), minmax(0, 1fr));
	}
}

.hvl-rules__item {
	min-width: 0;
	padding: 22px 0 26px;
	border-top: 1px solid var(--rules-line);
}

.hvl-rules__ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	margin-bottom: 16px;
	border-radius: 12px;
	color: var(--rules-brand);
	background: var(--rules-soft);
}

.hvl-rules__ico--neutral {
	color: var(--e-global-color-text, #14161d);
	background: var(--rules-soft-2);
}

.hvl-rules__ico svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hvl-rules .hvl-rules__tag {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--rules-brand);
}

.hvl-rules .hvl-rules__title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: var(--rules-ink);
}

.hvl-rules .hvl-rules__text {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--rules-mute);
}

.hvl-rules__text strong,
.hvl-rules__text b {
	font-weight: 600;
	color: var(--rules-ink);
}

.hvl-rules__text a {
	color: var(--rules-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hvl-rules--dark .hvl-rules__text a {
	color: var(--e-global-color-blanc, #fff);
}