@layer wpsa.modules {
	/* Cards, not bare columns: a border and a surface give each feature a
	   boundary, which is what makes a three-up read as a set rather than as
	   three paragraphs that happen to be side by side. */
	.wpsa-feature {
		display: flex;
		flex-direction: column;
		gap: var(--wpsa-space-2xs);
		padding: var(--wpsa-space-md);
		border: 1px solid var(--wpsa-color-border);
		border-radius: var(--wpsa-radius-lg);
		background: var(--wpsa-color-bg);
		transition: box-shadow var(--wpsa-transition), transform var(--wpsa-transition), border-color var(--wpsa-transition);
	}

	.wpsa-feature:hover {
		border-color: color-mix(in oklab, var(--wpsa-color-accent) 30%, var(--wpsa-color-border));
		box-shadow: var(--wpsa-shadow-md);
		transform: translateY(-2px);
	}

	.wpsa-scheme--dark .wpsa-feature,
	.wpsa-scheme--accent .wpsa-feature {
		background: rgb(255 255 255 / 6%);
		border-color: rgb(255 255 255 / 12%);
	}

	.wpsa-feature__icon {
		width: 2.75rem;
		height: 2.75rem;
		object-fit: contain;
		margin-block-end: var(--wpsa-space-2xs);
	}

	.wpsa-feature__title {
		font-size: var(--wpsa-text-lg);
		letter-spacing: -0.01em;
	}

	.wpsa-feature__text {
		color: var(--wpsa-color-text-muted);
		font-size: var(--wpsa-text-sm);
	}

	.wpsa-feature__link {
		align-self: start;
		margin-block-start: auto;
		padding-block-start: var(--wpsa-space-xs);
		color: var(--wpsa-color-accent);
		font-weight: 620;
		font-size: var(--wpsa-text-sm);
		text-decoration: none;
	}

	.wpsa-feature__link::after {
		content: "\2192";
		display: inline-block;
		margin-inline-start: 0.4em;
		transition: transform var(--wpsa-transition);
	}

	.wpsa-feature:hover .wpsa-feature__link::after {
		transform: translateX(3px);
	}

	.wpsa-scheme--dark .wpsa-feature__link,
	.wpsa-scheme--accent .wpsa-feature__link {
		color: currentColor;
	}
}