.sw-whale-metrics {
	--sw-whale-metrics-cols: 3;
	--sw-whale-metrics-value-color: #ffffff;
	--sw-whale-metrics-label-color: #ffffff;
	--sw-whale-metrics-divider: rgba(255, 255, 255, 0.45);
	--sw-whale-metrics-divider-height: 72px;

	display: grid;
	grid-template-columns: repeat(var(--sw-whale-metrics-cols), minmax(0, 1fr));
	align-items: center;
	width: 100%;
}

.sw-whale-metrics__item {
	position: relative;
	min-width: 0;
	padding: 0.35rem 0.5rem;
}

.sw-whale-metrics__value {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.05em;
	color: var(--sw-whale-metrics-value-color);
	font-weight: 700;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.sw-whale-metrics__prefix,
.sw-whale-metrics__suffix {
	font: inherit;
	color: inherit;
}

.sw-whale-metrics__label {
	margin-top: 0.45rem;
	color: var(--sw-whale-metrics-label-color);
	font-size: clamp(0.875rem, 1.6vw, 1.05rem);
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.95;
}

.sw-whale-metrics--dividers .sw-whale-metrics__item + .sw-whale-metrics__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: var(--sw-whale-metrics-divider-height);
	transform: translateY(-50%);
	background: var(--sw-whale-metrics-divider);
}

.sw-whale-metrics--animate:not(.is-counted) .sw-whale-metrics__number {
	opacity: 0.92;
}

.sw-whale-metrics.is-counted .sw-whale-metrics__number {
	opacity: 1;
}

@media (max-width: 767px) {
	.sw-whale-metrics {
		grid-template-columns: repeat(var(--sw-whale-metrics-cols), minmax(0, 1fr));
	}

	.sw-whale-metrics--dividers .sw-whale-metrics__item + .sw-whale-metrics__item::before {
		display: none;
	}

	.sw-whale-metrics--dividers .sw-whale-metrics__item:not(:last-child)::after {
		content: "";
		display: block;
		width: min(120px, 60%);
		height: 1px;
		margin: 1rem auto 0;
		background: var(--sw-whale-metrics-divider);
	}
}