html, body {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

header, footer {
	background-color: inherit;
	flex: none;
}

main, .container:has(main) {
	flex: 1;
	overflow: hidden auto;
}

.card p {
	text-indent: 1em;
}

.numbered-icon,
.bi:has(.bi-enclose) {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
}

	.numbered-icon::before,
	.numbered-icon::after,
	.bi:has(.bi-enclose)::before,
	.bi:has(.bi-enclose)::after {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		line-height: 1;
	}

	.numbered-icon::after,
	.bi:has(.bi-enclose)::after {
		content: attr(data-number);
		font-family: inherit;
		font-size: 75%;
	}