@layer components {
	.checklist-card {
		--checklist-card-accent: var(--color-green);

		display: flex;
		flex-direction: column;
		gap: var(--gutter);
		text-decoration: none;
		padding: calc(var(--gutter) * 2);
		background: var(--color-bg-card);
		border-radius: 8px;
	}

	@scope (.checklist-card) {
		& > p:nth-of-type(1) {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xxxl);
			font-weight: 700;
			letter-spacing: -0.03em;
			line-height: 1;
			color: var(--checklist-card-accent);
		}

		& > p:nth-of-type(2) {
			font-size: 0.75rem;
			font-weight: 500;
			color: var(--color-text-muted);
		}

		& > p:nth-of-type(3) {
			font-family: var(--font-family-heading);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			letter-spacing: -0.02em;
		}

		& > p:nth-of-type(4) {
			font-size: var(--font-size-sm);
			color: var(--color-text-muted);
		}
	}
}