/* MagicKit - Icon Box Grid */
.mk-ibg {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.mk-ibg__item {
	--mk-ibg-accent: var(--mk-primary);
	--mk-x: 50%;
	--mk-y: 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border: 1px solid transparent;
	border-radius: var(--mk-radius);
	background: var(--mk-surface);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: all var(--mk-speed) ease;
}

a.mk-ibg__item:hover {
	color: inherit;
}

.mk-ibg__number {
	display: none;
	position: absolute;
	top: 18px;
	right: 22px;
	color: color-mix(in srgb, var(--mk-ibg-accent) 25%, transparent);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
}

.mk-ibg-numbers-yes .mk-ibg__number {
	display: block;
}

.mk-ibg__icon {
	display: inline-grid;
	place-items: center;
	align-self: var(--mk-align, flex-start);
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--mk-ibg-accent) 12%, transparent);
	color: var(--mk-ibg-accent);
	font-size: 24px;
	transition: all var(--mk-speed) ease;
}

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

.mk-ibg__title {
	margin: 0 0 8px;
	color: var(--mk-dark);
	font-size: 19px;
	transition: color var(--mk-speed) ease;
}

.mk-ibg__desc {
	margin: 0;
	color: var(--mk-text);
	transition: color var(--mk-speed) ease;
}

/* Skins */
.mk-ibg-skin-card .mk-ibg__item {
	box-shadow: var(--mk-shadow);
}

.mk-ibg-skin-card .mk-ibg__item:hover {
	transform: translateY(-6px);
	box-shadow: var(--mk-shadow-hover);
}

.mk-ibg-skin-outline .mk-ibg__item {
	border-color: var(--mk-border);
}

.mk-ibg-skin-outline .mk-ibg__item:hover {
	border-color: var(--mk-ibg-accent);
}

.mk-ibg-skin-fill .mk-ibg__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(140deg, var(--mk-ibg-accent), var(--mk-secondary));
	transform: translateY(101%);
	transition: transform calc(var(--mk-speed) * 1.4) cubic-bezier(0.7, 0, 0.2, 1);
}

.mk-ibg-skin-fill .mk-ibg__item:hover::before {
	transform: none;
}

.mk-ibg-skin-fill .mk-ibg__item:hover .mk-ibg__title,
.mk-ibg-skin-fill .mk-ibg__item:hover .mk-ibg__desc {
	color: #fff;
}

.mk-ibg-skin-fill .mk-ibg__item:hover .mk-ibg__icon {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.mk-ibg-skin-spotlight .mk-ibg__item {
	border-color: var(--mk-border);
}

.mk-ibg-skin-spotlight .mk-ibg__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(320px circle at var(--mk-x) var(--mk-y), color-mix(in srgb, var(--mk-ibg-accent) 18%, transparent), transparent 60%);
	opacity: 0;
	transition: opacity var(--mk-speed) ease;
}

.mk-ibg-skin-spotlight .mk-ibg__item:hover::before {
	opacity: 1;
}