.myfw-zl {
	--myfw-zl-accent: var(--color-accent, #b05a38);
	--myfw-zl-cols: 3;
	--myfw-zl-col-gap: 48px;
	--myfw-zl-row-gap: 36px;
	--myfw-zl-head-gap: 20px;

	--myfw-zl-title-color: var(--color-text, #1f1f1f);
	--myfw-zl-bubble: 46px;
	--myfw-zl-bubble-bw: 3px;
	--myfw-zl-bubble-gap: 14px;

	--myfw-zl-chip-color: var(--color-text, #1f1f1f);
	--myfw-zl-chip-bg: #fffdf9;
	--myfw-zl-chip-border: #e5e0d6;
	--myfw-zl-chip-bw: 1px;
	--myfw-zl-chip-radius: 999px;
	--myfw-zl-chip-pad: 10px 20px;
	--myfw-zl-chip-gap-x: 12px;
	--myfw-zl-chip-gap-y: 12px;
	--myfw-zl-chip-color-hover: var(--myfw-zl-chip-color);
	--myfw-zl-chip-bg-hover: var(--myfw-zl-chip-bg);
	--myfw-zl-chip-border-hover: var(--myfw-zl-accent);

	display: grid;
	grid-template-columns: repeat( var(--myfw-zl-cols), minmax( 0, 1fr ) );
	column-gap: var(--myfw-zl-col-gap);
	row-gap: var(--myfw-zl-row-gap);
	width: 100%;
}

.myfw-zl__head {
	display: flex;
	align-items: center;
	gap: var(--myfw-zl-bubble-gap);
	margin-bottom: var(--myfw-zl-head-gap);
}
.myfw-zl__bubble {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--myfw-zl-bubble);
	height: var(--myfw-zl-bubble);
	border-radius: 50%;
	border: var(--myfw-zl-bubble-bw) solid rgba( 0, 0, 0, 0.18 );
	background-color: var(--myfw-zl-accent);
	color: #ffffff;
	font-family: var(--font-heading, inherit);
	font-size: calc( var(--myfw-zl-bubble) * 0.4 );
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}
.myfw-zl__title {
	margin: 0;
	font-family: var(--font-heading, inherit);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--myfw-zl-title-color);
}

.myfw-zl__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--myfw-zl-chip-gap-y) var(--myfw-zl-chip-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}
.myfw-zl__chip {
	margin: 0;
	padding: var(--myfw-zl-chip-pad);
	font-size: 1.1rem;
	line-height: 1.2;
	color: var(--myfw-zl-chip-color);
	background-color: var(--myfw-zl-chip-bg);
	border: var(--myfw-zl-chip-bw) solid var(--myfw-zl-chip-border);
	border-radius: var(--myfw-zl-chip-radius);
	box-sizing: border-box;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.myfw-zl__chip:hover {
	color: var(--myfw-zl-chip-color-hover);
	background-color: var(--myfw-zl-chip-bg-hover);
	border-color: var(--myfw-zl-chip-border-hover);
}

@media ( prefers-reduced-motion: reduce ) {
	.myfw-zl__chip {
		transition: none;
	}
}