@layer components {
	.solution-row {
		padding-block: calc(var(--stack) * 3);
		border-block-start: 1px solid var(--color-border);
	}

	@scope (.solution-row) {
		& > a {
			align-items: start;
			text-decoration: none;
			color: inherit;
		}

		.solution-row__header {
			display: flex;
			gap: calc(var(--gutter) * 0.75);
			align-items: flex-start;
		}

		.solution-row__header h2 {
			font-size: var(--font-size-xxl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
		}

		.solution-row__header > div > p {
			font-size: var(--font-size-xs);
			font-weight: 500;
			color: var(--solution-row-accent, var(--primary));
		}

		.solution-row__stat {
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.solution-row__stat > p:first-child {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xxl);
			font-weight: 700;
			letter-spacing: -0.02em;
		}

		.solution-row__stat > p:last-child {
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--color-text-muted-invert);
		}
	}
}