.quote-block {  // structure
	box-sizing: border-box;
	&__header {
		display: grid;
	}
	&__attribution {  // either an author="" or card=""
		margin: 0;
		display: inline-flex;
	}
	&__card {  // avatar and display name
		display: inline-grid;
		place-items: center;
	}
	&__author {  // markdown text
		display: inline-grid;
		grid-template-columns: auto 1fr;
		place-items: center;
		a {
			display: inline-flex;
			align-items: center;
		}
	}
	&__postpend {  // " wrote:" goes after either card or author
		display: inline-grid;
		align-items: center;
		white-space: pre;
	}
	&__prepend {  // when there is no attribution, "quote:"
		margin-block: 0;
		display: inline-grid;
		grid-template-columns: auto 1fr;
		place-items: center start;
	}
	&__content {
		blockquote {
			margin: 0;
			> *:first-child {
				margin-block-start: 0;

			}
			> *:last-child {
				margin-block-end: 0;
			}
		}
	}
	&__footer {
		&:before {
			content: '— ';
		}
	}
}

.quote-block {
	&__header, &__content, &__footer {
		padding-inline: 1em;
		background: var(--ui-overlay-transparent);
	}
	&__header {
		padding-block-start: 1em;
	}
	&__header:has(&__card) {
		padding-block-end: 1em;
	}
	&__content, &__footer {
		padding-block-end: 1em;
	}
	&__author, &__prepend {
		font-weight: bold;
		// position: relative;
		// &:before {
		// 	content: '';
		// 	display: inline;
		// 	width: 3em;
		// 	height: 3em;
		// 	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIj48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTYwMCAxMjAwYzMzMS4zNzEgMCA2MDAtMjY4LjYyOSA2MDAtNjAwUzkzMS4zNzEgMCA2MDAgMFMwIDI2OC42MjkgMCA2MDBzMjY4LjYyOSA2MDAgNjAwIDYwMG00NS45MjMtMjgyLjQyMkw2MjAuMTQyIDc5OC44NWM3NS41NDEtMTYuNzIxIDE0NS4wMDUtMzguNDY4IDEzOS4zOC0xMjIuODI1aC04OC43N1YzNjAuMDU3aDI2Ny40MDd2Mjk1LjMxNGMtLjA5NSAyMzQuNjkxLTE3Mi40MDEgMjUzLjc4Ni0yOTIuMjM2IDI2Mi4yMDdtLTM1OC4yMjggMEwyNjEuODQxIDc5OC44NWM3NS41NDEtMTYuNzIxIDE0NS4wMDUtMzguNDY4IDEzOS4zOC0xMjIuODI1aC04OC43N1YzNjAuMDU3aDI2Ny40MDd2Mjk1LjMxNGMtLjA5NCAyMzQuNjkxLTE3Mi4zMjggMjUzLjc4Ni0yOTIuMTYzIDI2Mi4yMDciLz48L3N2Zz4=);
		// 	background-size: 75%;
		// 	background-repeat: no-repeat;
		// 	background-position: center;
		// 	margin-right: 0.5em;
		// }
	}
}