main.index {
	flex-grow: 0;
	width: 100%;
	max-width: var(--container-width, 60rem);
	margin: 0 auto;
	margin-bottom: 4rem;
	@include box-shadow;
	article:not(.h-card) {
		padding: 1em;
		> .title {
			font-size: 1.5rem;
			font-variant: small-caps;
		}
		.section-title {
			font-size: 1.25rem;
		}
	}

	article#quotes {
		background: #ddd;
		> .title {

		}
	}

	article#mastodon {
		background: #3088d4;
		color: white;
		padding: 2em 1em;
		a {
			display: inline-block;
			text-decoration: none;
			background: white;
			padding: 1rem;
			color: black;
			font-weight: bold;
			border-radius: 10px;
			border: 1px solid rgba(0,0,0,0.25);
		}
	}

	article#now {
		background: white;
	}
	article#todo {
		background: white;
	}

	@media (min-width: 40rem) {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		#about {
			grid-column: 1 / span 12;
			display: grid;
			grid-template-columns: 20rem 1fr;
			width: 100%;
		}
		article.h-card {
			.metadata {
				padding-inline: 0.75em;
			}
		}
		#deeds {
			grid-column: 1 / span 12;
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		article#mastodon {
			grid-column: 1 / span 2;
			display: grid;
			grid-template-columns: 1fr auto auto auto 1fr;
			gap: 1em;
			svg {
				grid-column: 2;
				place-self: center;
			}
			.title {
				grid-column: 3 / span 2;
				font-size: 2rem;
				margin: 0;
				place-self: center start;
			}
			p {
				grid-column: 2 / span 2;
				font-size: 1.25rem;
				max-width: 35ch;
				margin: 0;
				place-self: center start;
			}
			a {
				grid-column: 4;
				grid-row: 2;
				place-self: center start;
			}
		}
		article#now {
			grid-column: 1 / span 1;
		}
		article#todo {
			grid-column: 2 / span 1;
		}
	}

	@media (min-width: 60rem) {
		margin-top: 1rem;
		#about {
		}
		#deeds {

		}
		article#now {
			padding: 2em;
			height: 320px;
		}
		article#todo {
			padding: 2em;
		}
	}

	// @media (min-width: 100rem) {
	// 	max-width: 100rem;
	// 	display: grid;
	// 	grid-template-columns: 60rem 40rem;
	// 	margin-top: 2rem;

	// 	#about {
	// 		grid-column: 1;
	// 	}
	// 	#deeds {
	// 		grid-column: 2;
	// 		display: grid;
	// 		grid-template-columns: 1fr;
	// 		grid-template-rows: auto auto 1fr;
	// 	}
	// 	article#now {
	// 		grid-column: 1;
	// 	}
	// 	article#todo {
	// 		grid-column: 1;
	// 	}
	// }

	figure.quote {
		border: 0;
		blockquote {
			padding-inline-start: 0;
			&:before {
				inset-inline-start: 0;
			}
		}
	}

	#wiki {
		max-width: 120em;
		margin-inline: auto;
		h1 {
			margin-bottom: 0.25em;
			font-family: serif;
			border-bottom: 1px solid currentColor;
			padding-bottom: 1rem;
		}
		h2 {
			font-weight: normal;
			border-bottom: 1px solid currentColor;
			padding-bottom: 1rem;
			font-family: serif;
		}
		#TableOfContents {
			display: contents;
			&::before {
				content: "Contents";
				font-weight: bold;
			}
		}
	}

	.h-card {
		--border-radius: 0px;
		border-radius: var(--border-radius, 10px);
		background: #eee;
		h2 {
			text-align: center;
			font-size: 1em;
			margin: 0em;
			padding: 1rem;
		}
		header {
			aspect-ratio: 2;
			background-image: url('/images/sunset.jpg');
			background-size: cover;
			background-position: center;
			position: relative;
			border-top-left-radius: var(--border-radius, 10px);
			border-top-right-radius: var(--border-radius, 10px);
			img {
				border-radius: 12px;
				background-color: #ddd;
				padding: 10px;
				width: 120px;
				height: 120px;
				position: absolute;
				left: calc(50% - 60px);
				top: calc(100% - 60px);
			}
			margin-bottom: 60px;
		}
		.info {
			text-align: center;
			p {
				margin: 0;
				line-height: 1;
			}
			.p-name {
				font-weight: bold;
				text-align: center;
				font-size: 1.5rem;
				line-height: 2rem;
			}
			.u-uid {
				text-decoration: none;
				font-family: monospace;
				color: inherit;
				font-size: 1.25em;
				display: inline-block;
				line-height: 24px;
			}
			.p-note {
				margin-bottom: 1rem;
				line-height: 1.5;
			}
		}
		.metadata {
			padding-block-end: 2rem;
			display: grid;
			gap: 1em;
			.field {
				display: grid;
				place-items: start;
				gap: 0.5em;
				padding: 0 1em;
			}
			dt {
				font-weight: bold;
				font-variant: small-caps
			}
			dd {
	
			}
		}
	}

}