.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	background: variables.$bg-default;
	border: 1px solid transparent;
	border-radius: variables.$radius-md;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	transition: transform variables.$duration-normal variables.$ease-out,
		box-shadow variables.$duration-normal variables.$ease-out,
		border-color variables.$duration-normal variables.$ease-out;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 3px;
		height: 100%;
		background: var(--stat-accent, variables.$border-default);
		border-radius: 0 2px 2px 0;
		transition: width variables.$duration-normal variables.$ease-out;
	}

	&:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
		border-color: transparent;

		&::before {
			width: 4px;
		}
	}
}

.value {
	@include typography.font-display;
	color: variables.$text-primary;
	line-height: 1;
}

.label {
	@include typography.font-body-s;
	color: variables.$text-secondary;
}
