.stats-bar {
	background: var(--secondary);
	color: var(--white);
	padding: 34px 0;
}

.stats-bar-items {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.stats-bar-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 24px;
	position: relative;
}

.stats-bar-item:first-child {
	padding-left: 0;
}

.stats-bar-item:last-child {
	padding-right: 0;
}

.stats-bar-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 34px;
	background: color-mix(in srgb, var(--white) 30%, transparent);
}

.stats-bar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--white) 50%, transparent);
	color: var(--white);
}

.stats-bar-icon svg {
	width: 24px;
	height: 24px;
}

.stats-bar-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	white-space: nowrap;
}

.stats-bar-text strong {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
}

.stats-bar-text span {
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	opacity: .9;
}

@media (max-width: 767px) {

	.stats-bar-items {
		justify-content: center;
	}

	.stats-bar-item {
		padding: 0 16px;
	}

	.stats-bar-item:not(:last-child)::after {
		display: none;
	}

	.stats-bar-text {
		white-space: normal;
	}

}