section.component.article { background-color: #FFF; }

/*-------------------------------------------------------------------------------------------------------*/

section.component.article > * {
	display: flex; width: 100%;
	flex-direction: column;
	align-items: center;
}
section.component.article > * > * { width: 1024px; }

section.component.article > header {
	padding: 50px 0 20px;
	margin-bottom: 15px;
	
	background-color: rgba(0,0,0,.1);
}
section.component.article > header > * { width: 1024px; }
section.component.article > header > h1:not(:only-child),
section.component.article > header > h2:not(:only-child),
section.component.article > header > h3:not(:only-child) { margin-bottom: 10px; }
section.component.article > header > *:first-child ~ * {
	padding-left: 40px;
	
	text-shadow: 1px 1px #FFF;
	color: #888;
}

section.component.article > section { padding-bottom: 50px; }

/*-------------------------------------------------------------------------------------------------------*/

section.component.article.row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	padding-top: 50px;
}

section.component.article.row > * {
	display: block; width: auto;
}
section.component.article.row > * > * { width: auto; }

section.component.article.row > section > header { margin-bottom: 25px; }

section.component.article.row > section:nth-last-child(2),
section.component.article.row > section:nth-last-child(2) ~ section { flex: 0 0 calc((1024px -  30px	  )	/ 2); }
section.component.article.row > section:nth-last-child(3),
section.component.article.row > section:nth-last-child(3) ~ section { flex: 0 0 calc((1024px - (30px * 2)) / 3); }
section.component.article.row > section:nth-last-child(4),
section.component.article.row > section:nth-last-child(4) ~ section { flex: 0 0 calc((1024px - (30px * 3)) / 4); }
section.component.article.row > section:not(:last-child) { margin-right: 30px; }