[data-card] {
	position: relative;
	display: inline-block;
	background-color: var(--col-bg2);
	color: var(--col-fg);
	border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
		var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
	padding: 1rem;

	--t-translate: 0.25s;
	translate: 0 0;

	@media (prefers-contrast: more) {
		border: 2px solid var(--col-fg);
	}

	> * + * {
		margin-block-start: 1rem;
		margin-block-end: 0;
	}

	> [data-card-link] {
		position: absolute;
		inset: 0;
		z-index: 2;
		border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
			var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));

		&:focus {
			outline: 0.125rem solid dodgerblue;
			outline-offset: -0.125rem;
		}
	}

	&:has([data-card-link]):is(:hover, :focus-within) {
		translate: 0 -0.3rem;
	}

	> header {
		background-color: var(--col-bg3);
		margin: -1rem -1rem 1rem;
		padding: 1rem;
		border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius)) 0 0;
		font-size: 1.2rem;
		font-weight: 600;

		> :is(h1, h2, h3, h4, h5, h6) {
			margin-block: 0;
		}

		+ [data-card-background] {
			--br-tl: 0;
			--br-tr: 0;
		}
	}

	> footer {
		background-color: var(--col-bg3);
		margin: 1rem -1rem -1rem;
		padding: 1rem 1rem;
		border-radius: 0 0 var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
	}

	> [data-card-background] {
		display: grid;
		position: relative;
		margin: -1rem;
		max-width: calc(100% + 2rem);
		border-radius: var(--br-tl, var(--border-radius)) var(--br-tr, var(--border-radius))
			var(--br-br, var(--border-radius)) var(--br-bl, var(--border-radius));
		overflow: hidden;

		&:not(:last-child) {
			--br-bl: 0;
			--br-br: 0;
		}

		& * {
			max-width: 100%;
			height: auto;
		}

		&:has(figcaption) {
			min-height: 3.5rem;
		}

		> figcaption {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 1rem 0;
			text-align: center;
			background: color-mix(in lch, var(--col-bg2), transparent 20%);
			font-weight: 500;

			@media (prefers-reduced-transparency) {
				background: var(--col-bg2);
			}
		}
	}
}