@layer components {
	.checklist-card {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		padding: calc(var(--gutter) * 2);
		border: 1px solid var(--color-border);
		border-radius: var(--border-radius-lg);
	}

	@scope (.checklist-card) {
		& > p:nth-of-type(1) {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
			color: var(--color-text);
		}

		& > p:nth-of-type(2) {
			margin-block-start: auto;
			padding-block-start: calc(var(--gutter) * 0.75);
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}