.xprez-numbers {
	text-align: center;
	padding: $g*2 0 $g*1;

	@media only screen and (max-width: ($break-s)) {
		padding: $g*1 0 0;
	}
}

.xprez-number-item {
	display: inline-block;
	vertical-align: top;
	margin: 0 30px $g*2;
	
	@media only screen and (max-width: ($break-m)) {
		min-width: 130px;
	}
	@media only screen and (max-width: ($break-s)) {
		min-width: 120px;
		margin: 0 10px $g*1.5;
	}
}

.xprez-number {
	@include condensed;
	line-height: 1;
	color: var(--x-numbers-digit-color);
}

.xprez-number-digits {
	@include type($numbers-digit-size, null);
	@include type-min($numbers-digit-size * 0.75, null);
	font-weight: $numbers-digit-weight;
}

.xprez-number-suffix {
	@include type($numbers-suffix-size, null);
	@include type-min($numbers-suffix-size * 0.75, null);
	font-weight: $numbers-suffix-weight;
	margin-left: $numbers-suffix-ml;
	opacity: $numbers-suffix-opacity;
}

.xprez-number-title {
	@include type($numbers-description-size, $numbers-description-lh);
	text-transform: $numbers-description-text-transform;
	font-weight: $numbers-description-weight;
	font-style: $numbers-description-style;
	opacity: $numbers-description-opacity;
	max-width: 100px;
	display: inline-block;

	&:before {
		content:'';
		display: block;
		height: 1px;
		background-color: var(--x-numbers-stroke-bg);
		width: 16px;
		margin: $g auto $g;
	}
}