.scds-iconify-icon {
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	background: currentcolor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.scds-insight-card__icon .scds-iconify-icon {
	width: 22px;
	height: 22px;
}

.nav-icon.scds-iconify-icon {
	width: 18px;
	height: 18px;
}

.brandmark .glyph .scds-iconify-icon {
	width: 21px;
	height: 21px;
}

.compat-grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.compat-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	min-height: 190px;
	padding: var(--s-5);
}

.compat-card .compat-card-icon {
	align-items: center;
	background: var(--brand-soft);
	border: 1px solid var(--hairline);
	border-radius: var(--r-sm);
	color: var(--brand);
	display: inline-flex;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.compat-card .compat-card-icon .scds-iconify-icon {
	height: 22px;
	width: 22px;
}

.compat-card .cr-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.compat-card .nm {
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.24;
	overflow-wrap: anywhere;
}

.compat-card .sub {
	color: var(--text-muted);
	font-size: 13.5px;
	line-height: 1.45;
	margin-top: 5px;
	overflow-wrap: anywhere;
}

.compat-card .badge {
	align-self: flex-start;
	margin-top: auto;
	width: fit-content;
}

.scds-sidebar-glyph-fallback {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
