@layer components {
	.guide-card {
		--guide-card-accent: var(--primary);

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

	@scope (.guide-card) {
		& > div:first-child {
			display: flex;
			align-items: center;
			gap: calc(var(--gutter) / 2);
		}

		& > div > span:first-child {
			inline-size: 8px;
			block-size: 8px;
			border-radius: 50%;
			background-color: var(--guide-card-accent);
			flex-shrink: 0;
		}

		& > div > span:last-child {
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-medium);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--color-text-muted-invert);
		}

		& > 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) {
			font-size: var(--font-size-sm);
			color: var(--color-text-faint-invert);
		}
	}
}