.ksi-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ksi-gap, 12px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ksi-align-center { justify-content: center; }
.ksi-align-right  { justify-content: flex-end; }

.ksi-item { margin: 0; padding: 0; }

.ksi-link {
	--ksi-box: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ksi-box);
	height: var(--ksi-box);
	background: var(--ksi-bg, #333);
	color: var(--ksi-color, #fff);
	border-radius: var(--ksi-radius, 12px);
	font-size: calc(var(--ksi-box) * 0.5);
	line-height: 1;
	text-decoration: none;
	transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.ksi-size-sm .ksi-link { --ksi-box: 36px; }
.ksi-size-md .ksi-link { --ksi-box: 48px; }
.ksi-size-lg .ksi-link { --ksi-box: 60px; }
.ksi-size-xl .ksi-link { --ksi-box: 72px; }

.ksi-link:hover {
	transform: translateY(-2px);
	opacity: .92;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.ksi-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}