$post-width-outer: 100%;


@mixin about-layout-basic() {
	margin: 0 auto;
	max-width: 480px;
	text-align: center;
	box-sizing: border-box;
	@media (max-width: 680px) {
		padding: 0 20px;
		width: 100%;
	}
}

article#about {
	@include article-layout-basic();
	width: $post-width-outer;
	header {
		@include about-layout-basic();
		div.image-wrap {
			margin: 0 auto;
			padding: 3px;
			width: 180px;
			height: 180px;
			border-radius: 50%;
			border: 3px solid black;
			img {
				width: 180px;
				height: auto;
				display: block;
				border-radius: 50%;
				border: 3px solid black;
			}
		}
		h2 {
			@include post-content-louder();
			padding-bottom: 1em;
		}
	}
	main {
		@include about-layout-basic();
		p {
			@include post-content-basic();
			padding-top: 2em;
		}
	}
	footer {
		@include about-layout-basic();
		font-size: 0.75em;
		letter-spacing: 2px;
		text-transform: uppercase;
		padding-bottom: 3.5em;
	}
}