.blog-post {
	padding-top: var(--padding4);
	grid-template-areas: 
		"header header header header"
		"content content content content"
	;
	@media screen and (min-width: 35em) {
		grid-template-areas: 
			"header header header header header header header header"
			"content content content content content content content content"
		;
	}
	@media screen and (min-width: 50em) {
		grid-template-areas: "header header header content content content content content content content content .";
	}
	& header {
		grid-area: header;
		& h1 {
			margin: 0 0 var(--margin1); 
		}
		& time {
			margin-right: var(--margin2);
			margin-bottom: var(--margin4);
			@media screen and (min-width: 50em) {
				display: block;
			}
		}
	}
	& .content {
		grid-area: content;
		hanging-punctuation: first last;
		& > * {
			margin-top: 0;
			@media screen and (min-width: 35em) {
				&:first-child {
					margin-top: 3px;
				}
			}
		}
		& a {
			color: var(--primaryText);
		}
		& h2, & h3, & h4, & h5, & h6 {
			margin-bottom: 0;
		}
		& p, & ul, & ol, & dl, & table, & pre, & code {
			margin-bottom: 1em;
			& li {
				margin: 0;
				&::marker {
					color: var(--gray35);
				}
				& p {
					margin: 0;
				}
			}
		}
		& ul {
			padding-left: 1em;
		}
		& blockquote {
			margin: 0 0 1em;
			padding-left: var(--padding2);
			border-left: 8px solid var(--gray22);
			& * {
				margin-top: 0;
			}
		}
		& figure {
			margin: 0 0 1em;
			& img {
				width: 100%;
				height: auto;
				box-shadow: var(--shadowProminent);
			}
		}
		& .image-link {
			text-decoration: none;
			& figcaption p {
				margin-top: var(--margin1Half);
			}
		}
		& .video, & .embed {
			background: var(--buttonBackground);
			box-shadow: var(--shadowProminent);
			display: flex;
			justify-content: center;
			align-content: center;
			width: calc(100% - 2px);
			aspect-ratio: 16 / 9;
			margin-bottom: 1em;
			width: 100%;
			& > * {
				width: 100%;
				height: 100%;
			}
		}
		& .double-image {
			display: flex;
			gap: var(--margin3);
			margin-bottom: 1em;
			& a {
				width: calc(50% - 12px);
				& figure {
					margin-bottom: 0;
				}
			}
		}
		& .triple-image {
			display: flex;
			gap: var(--margin3);
			margin-bottom: 1em;
			& a {
				width: calc((100% - var(--margin3) * 2) / 3);
				& figure {
					margin-bottom: 0;
				}
			}
		}
		& .quadruple-image {
			display: flex;
			flex-wrap: wrap;
			gap: var(--margin3);
			margin-bottom: 1em;
			& a {
				width: calc(50% - 12px);
				& figure {
					margin-bottom: 0;
				}
			}
		}
		& audio {
			margin-top: var(--margin3);
			width: 100%;
		}
	}
}