.photo-page .photo {
	display: grid;
	grid-template-areas:
		"image"
		"title"
		"caption"
		"meta"
		"footer";
	@media (min-width: 80rem) {
		grid-template-areas:
			"image title"
			"image caption"
			"image meta"
			"image footer";
		grid-template-columns: 1fr 20em;
		grid-template-rows: auto auto auto 1fr;
		min-height: 100vh;
	}
}

.photo-page picture, .photo-page source {
	display: contents;
}

.photo-page .photo .title {
	grid-area: title;
	text-align: center;
	font-weight: normal;
	margin-block-start: 2rem;
	margin-block-end: 1rem;
}

.photo-page .photo .caption {
	grid-area: caption;
	font-style: italic;
	font-family: monospace;
	margin-block-end: 2rem;
	max-width: 90%;
	margin-inline: auto;
}

.photo-page .photo img {
	grid-area: image;
	display: block;
	max-width: 100%;
	place-self: center;
}

.photo-page .photo .metadata {
	grid-area: meta;
	text-align: center;
	dt {
		font-weight: bold;
		font-variant: small-caps;
	}
}

.photo-page footer {
	text-align: center;
	h2	{
		font-size: 1em;
	}
}

.photo-page .tags {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	gap: 1em;
	a {
		color: #777;
	}
}