@layer components {
	.box {
		--box-bg: var(--color-bg-2);
		--box-padding: var(--gutter);
		--box-glow:
			0 1px 2px oklch(from var(--color-shadow) l c h / 0.04),
			inset -1px 1px 2px oklch(from var(--color-bg) l c h / 0.25),
			inset 1px 1px 2px oklch(from var(--color-bg) l c h / 0.25);

		background: var(--box-bg);
		border: var(--border-width-sm) solid var(--color-border);
		border-radius: var(--border-radius-md);
		padding-block: var(--box-padding);
		padding-inline: var(--box-padding);
	}

	.box__content {
		margin-block-start: var(--stack);
	}

	.box:has(> .box__content:first-child) > .box__content {
		margin-block-start: 0;
	}

	.box__heading {
		font-size: var(--box-heading-size, inherit);
		font-weight: var(--box-heading-weight, var(--font-weight-bold));
	}

	.box__subtitle {
		--flow-space: calc(var(--stack) / 2);
		font-size: var(--font-size-sm);
		color: color-mix(in oklch, currentColor 60%, transparent);
	}

	.box .button {
		--flow-space: calc(var(--stack) * 1.5);
	}

	.box:has(> img:first-child) > img:first-child {
		margin-block-start: calc(-1 * var(--box-padding));
		margin-inline: calc(-1 * var(--box-padding));
		inline-size: calc(100% + 2 * var(--box-padding));
		border-radius: calc(var(--border-radius-md) - var(--border-width-sm))
			calc(var(--border-radius-md) - var(--border-width-sm)) 0 0;
	}

	.box img {
		margin-block: 0;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.box:has([href]:hover) {
		background: color-mix(in oklch, var(--color-accent) 5%, var(--box-bg));
		transition: background var(--transition-fade);
	}

	.box:has([href]:focus-visible) {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	/* Variants */
	.box[data-variant="invert"] {
		--box-bg: var(--color-text);
		color: var(--color-bg);
	}

	.box[data-variant="invert"] * {
		color: inherit;
	}

	.box[data-variant="glow"] {
		box-shadow: var(--box-glow);
	}

	.box[data-variant="yellow"] {
		--box-bg: var(--color-yellow);
		color: var(--ink);
		border-color: oklch(from var(--color-yellow) calc(l - 0.1) c h);
	}

	.box[data-variant="yellow"] * {
		color: inherit;
	}

	.box[data-variant="green"] {
		--box-bg: var(--color-green);
		color: var(--ink);
		border-color: oklch(from var(--color-green) calc(l - 0.1) c h);
	}

	.box[data-variant="green"] * {
		color: inherit;
	}

	.box[data-variant="magenta"] {
		--box-bg: var(--color-magenta);
		color: var(--color-bg);
		border-color: oklch(from var(--color-magenta) calc(l - 0.1) c h);
	}

	.box[data-variant="magenta"] * {
		color: inherit;
	}
}