.icon-box-list:not(.--list) .icon-box {
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: var(--b-radius--24);
	border: 1px solid var(--gray-300, #D1D5DB);
	background: #FFF;
	overflow: hidden;
	padding: 32px var(--sp-16-32) 32px var(--sp-16-32);
}
.icon-box-list .icon-box__counter {
	position: relative;
	width: 56px;
	min-width: 56px;
	height: 56px;
	min-height: 56px;
	border-radius: 50%;
	background: var(--green-700, #15803D);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.icon-box-list .icon-box__img {
	display: flex;
	justify-content: center;
	margin-top: -24px;
}
.icon-box-list .icon-box__img__el {
	width: 100%;
	max-width: 60%;
	aspect-ratio: 24/20;
	object-fit: contain;
	object-position: center;
}
.icon-box-list .icon-box__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.icon-box-list .icon-box__text__desc {
	color: var(--gray-700, #374151);
}

.icon-box-list .icon-box.--color-bg {
	background: var(--dark-blue-500, rgb(68 51 129));
	border-color: rgb(96 81 148);
}
.icon-box-list .icon-box.--color-bg .icon-box__text__title {
	color: #fff;
}
.icon-box-list .icon-box.--color-bg .icon-box__text__desc {
	color: #fff;
	opacity: .8;
}

.icon-box-list.--list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
	border-radius: var(--b-radius--24);
	background: #FFF;
	overflow: hidden;
	padding: 32px var(--sp-16-32) 32px var(--sp-16-32);
}
.icon-box-list.--list .icon-box {
	display: flex;
	flex-direction: row;
	gap: 20px;
}
.icon-box-list.--list .icon-box__text {
	gap: 6px;
}
.icon-box-list.--list .icon-box__text__title {
	font-size: 16px;
}
.icon-box-list.--list .icon-box .icon-box__counter {
	width: 48px;
	min-width: 48px;
	height: 48px;
	min-height: 48px;
	background: var(--blue-700, #1d4ed8);
}