.sgd-bx {
	--sgd-c:var(--uicolor);
	position:relative;
	min-width:0;
	flex:1;
	display:flex;
	align-items:center;
	flex-direction:column;
	min-height:310px;
	padding:34px 20px 18px;
	border: 1px solid #00000029;
	border-radius:18px;
	background:var(--surface-color);
	box-shadow: var(--box-shadow-defult);
	text-align:center;
}

.sgd-bx.sgd-orange {
	--sgd-c:var(--uicolor2);
}

.sgd-bx .sgd-num {
	position:absolute;
	top:-24px;
	inset-inline:34%;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%);
	color:var(--on-color);
	background:var(--sgd-c);
	box-shadow:0 8px 18px color-mix(in srgb,var(--uicolor) 20%,transparent);
	font-family:var(--f-number);
	font-size:22px;
	font-weight:900;
}

.sgd-bx.sgd-orange .sgd-num {
	box-shadow:0 8px 18px color-mix(in srgb,var(--uicolor2) 20%,transparent);
}

.sgd-bx .sgd-ic {
	width:86px;
	height:86px;
	flex:0 0 86px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-block-end:14px;
	border-radius:50%;
	color:var(--sgd-c);
	background: rgb(var(--uicolor-code) / 16%);
	font-size:39px;
}

.sgd-bx.sgd-orange .sgd-ic {
	background:color-mix(in srgb,var(--uicolor2) 11%,transparent);
}

.sgd-bx .sgd-ic svg {
	max-width:46px;
	max-height:46px;
}

.sgd-bx h3 {
	margin:0 0 12px;
	color:var(--sgd-c);
	font-size: 20px;
	font-weight:900;
	line-height:1.5;
}

.sgd-bx p {
	margin:0;
	color:var(--secondarytext);
	font-size: 16px;
	font-weight: 700;
	line-height:1.9;
}

.sgd-bx .sgd-dot {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	margin-block-start:auto;
	padding-block-start:14px;
}

.sgd-bx .sgd-dot i {
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--diver);
}

.sgd-bx .sgd-dot i.active {
	background:var(--sgd-c);
}

.sgd-bx .sgd-arr {
	position:absolute;
	top:50%;
	inset-inline-end:-34px;
	z-index:3;
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--sgd-c);
	border-radius:10px;
	color:var(--sgd-c);
	background:var(--surface-color);
	font-size:20px;
	transform:translateY(-50%) rotate(45deg);
}

.sgd-bx .sgd-arr i {
	transform:rotate(-45deg);
}

html[dir="ltr"] .sgd-bx .sgd-arr i {
	transform:rotate(-45deg) scaleX(-1);
}

@media only screen and (max-width:1180px) {
	.sgd-bx {
		min-width:250px;
		flex:0 0 250px;
		scroll-snap-align:start;
	}
}

@media only screen and (max-width:820px) {
	.sgd-bx {
		min-width:270px;
		flex-basis:270px;
		min-height:300px;
	}

	.sgd-bx .sgd-arr {
		display:none;
	}
}

@media only screen and (max-width:380px) {
	.sgd-bx {
		min-width:252px;
		flex-basis:252px;
	}
}