.hvl-pgrid {
	--pg-ink: var(--e-global-color-text, #14161d);
	--pg-muted: var(--e-global-color-gris, #6a6f7d);
	--pg-brand: var(--e-global-color-primary, #08739f);
	--pg-accent: var(--e-global-color-accent, #38b0db);
	--pg-soft: var(--e-global-color-azur_50, #eef8fd);
	--pg-card-bg: var(--e-global-color-blanc, #fff);
	--pg-line: color-mix(in srgb, var(--pg-ink) 9%, transparent);
	--pg-deep-a: var(--e-global-color-secondary, #053a50);
	--pg-deep-b: var(--e-global-color-azur_deep, #032838);
	--pg-mono: var(--e-global-typography-label-font-family, ui-monospace), ui-monospace, "SF Mono", Menlo, monospace;
	--pg-gap: 16px;
	--pg-gap-wide: 18px;
}

.hvl-pgrid .hvl-pgrid__fig {
	display: block;
	width: 100%;
	height: auto;
	color: color-mix(in srgb, var(--pg-ink) 38%, transparent);
}

.hvl-pgrid .hvl-pgrid__fig .hvl-pg-ac {
	stroke: var(--pg-brand);
}

.hvl-pgrid .hvl-pgrid__fig .hvl-pg-acf {
	fill: var(--pg-brand);
	stroke: none;
}

.hvl-pgrid .hvl-pgrid__fig .hvl-pg-sheet {
	fill: var(--pg-card-bg);
}

.hvl-pgrid .hvl-pgrid__cover--deep .hvl-pgrid__fig {
	color: rgba(255, 255, 255, 0.3);
}

.hvl-pgrid .hvl-pgrid__cover--deep .hvl-pgrid__fig .hvl-pg-ac {
	stroke: var(--pg-accent);
}

.hvl-pgrid .hvl-pgrid__cover--deep .hvl-pgrid__fig .hvl-pg-acf {
	fill: var(--pg-accent);
}

.hvl-pgrid .hvl-pgrid__cover--deep .hvl-pgrid__fig .hvl-pg-sheet {
	fill: rgba(255, 255, 255, 0.07);
}

.hvl-pgrid .hvl-pgrid__todo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	border-radius: 6px;
	padding: 2px 7px;
	font-family: var(--pg-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: normal;
	white-space: nowrap;
	color: var(--pg-todo-ink, #8a5a00);
	background: var(--pg-todo-bg, #fff6e2);
	box-shadow: inset 0 0 0 1px rgba(138, 90, 0, 0.18);
}

.hvl-pgrid .hvl-pgrid__todo::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.hvl-pgrid .hvl-pgrid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 16px;
}

.hvl-pgrid .hvl-pgrid__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pg-brand);
}

.hvl-pgrid .hvl-pgrid__go svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s ease;
}

.hvl-pgrid.hvl-pgrid--feature {
	overflow: hidden;
	border-radius: var(--pg-feat-radius, 26px);
	background: var(--pg-card-bg);
	box-shadow: inset 0 0 0 1px var(--pg-line);
}

.hvl-pgrid .hvl-pgrid__feat {
	display: grid;
	grid-template-columns: 1fr;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.hvl-pgrid .hvl-pgrid__feat:hover {
	background: color-mix(in srgb, var(--pg-brand) 4%, transparent);
}

.hvl-pgrid .hvl-pgrid__feat:focus-visible {
	outline: 2px solid var(--pg-brand);
	outline-offset: 3px;
}

.hvl-pgrid .hvl-pgrid__feat:hover .hvl-pgrid__go svg {
	transform: translateX(3px);
}

.hvl-pgrid .hvl-pgrid__cover--deep {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 22px;
	background: linear-gradient(158deg, var(--pg-deep-a), var(--pg-deep-b));
}

.hvl-pgrid .hvl-pgrid__cover--deep .hvl-pgrid__fig {
	max-width: 420px;
}

.hvl-pgrid .hvl-pgrid__fbody {
	padding: 24px 20px 26px;
}

.hvl-pgrid .hvl-pgrid__k {
	display: inline-block;
	margin: 0 0 14px;
	border-radius: 999px;
	padding: 4px 11px;
	font-family: var(--pg-mono);
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--pg-brand);
	background: var(--pg-soft);
}

.hvl-pgrid .hvl-pgrid__ft {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.025em;
	color: var(--pg-ink);
	text-wrap: balance;
}

.hvl-pgrid .hvl-pgrid__fp {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pg-muted);
}

.hvl-pgrid .hvl-pgrid__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 18px 0 0;
	border-radius: 14px;
	padding: 13px 16px;
	background: var(--pg-card-bg);
	box-shadow: inset 0 0 0 1px var(--pg-line);
}

.hvl-pgrid .hvl-pgrid__note p {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 72ch;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--pg-muted);
}

.hvl-pgrid .hvl-pgrid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pg-gap);
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.hvl-pgrid .hvl-pgrid__card {
	display: flex;
	margin: 0;
	border-radius: var(--pg-card-radius, 22px);
	background: var(--pg-card-bg);
	box-shadow: inset 0 0 0 1px var(--pg-line);
}

.hvl-pgrid .hvl-pgrid__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 14px 14px 18px;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.hvl-pgrid .hvl-pgrid__link:hover {
	background: color-mix(in srgb, var(--pg-brand) 4%, transparent);
}

.hvl-pgrid .hvl-pgrid__link:focus-visible {
	outline: 2px solid var(--pg-brand);
	outline-offset: 3px;
}

.hvl-pgrid .hvl-pgrid__link:hover .hvl-pgrid__go svg {
	transform: translateX(3px);
}

.hvl-pgrid .hvl-pgrid__cover {
	overflow: hidden;
	border-radius: 14px;
	padding: 10px;
	background: linear-gradient(158deg, var(--pg-soft), var(--pg-card-bg));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-brand) 12%, transparent);
}

.hvl-pgrid .hvl-pgrid__t {
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--pg-ink);
}

.hvl-pgrid .hvl-pgrid__p {
	margin: 9px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--pg-muted);
}

.hvl-pgrid .hvl-pgrid__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin: 26px 0 0;
	border-radius: 20px;
	padding: 24px 20px;
	background: var(--pg-card-bg);
	background-image: repeating-linear-gradient(
		135deg,
		color-mix(in srgb, var(--pg-ink) 3%, transparent) 0 1px,
		transparent 1px 12px
	);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pg-ink) 12%, transparent);
}

.hvl-pgrid .hvl-pgrid__empty-txt {
	display: flex;
	flex: 1 1 300px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.hvl-pgrid .hvl-pgrid__empty-fig {
	flex: none;
	width: 200px;
	height: auto;
	color: color-mix(in srgb, var(--pg-ink) 24%, transparent);
}

.hvl-pgrid .hvl-pgrid__empty-t {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--pg-ink);
}

.hvl-pgrid .hvl-pgrid__empty-p {
	max-width: 62ch;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--pg-muted);
}

@media (max-width: 639px) {
	.hvl-pgrid .hvl-pgrid__empty-fig {
		display: none;
	}
}

@media (min-width: 640px) {
	.hvl-pgrid .hvl-pgrid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 810px) {
	.hvl-pgrid .hvl-pgrid__fbody {
		padding: 32px 30px;
	}

	.hvl-pgrid .hvl-pgrid__ft {
		font-size: 25px;
	}

	.hvl-pgrid .hvl-pgrid__empty {
		padding: 28px 30px;
	}
}

@media (min-width: 900px) {
	.hvl-pgrid .hvl-pgrid__feat {
		grid-template-columns: 0.95fr 1.05fr;
	}
}

@media (min-width: 1040px) {
	.hvl-pgrid .hvl-pgrid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--pg-gap-wide);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hvl-pgrid .hvl-pgrid__feat,
	.hvl-pgrid .hvl-pgrid__link,
	.hvl-pgrid .hvl-pgrid__go svg {
		transition: none;
	}
}