#article-container { display: flex; }
#article-container:last-child { padding-bottom: 100px; }
@media (min-width: 1290px) {
	#article-container { flex-direction: row; }
	#article-container > * { flex: 1; overflow: hidden; }
}
@media (max-width: 1289.99px) {
	#article-container { flex-direction: column-reverse; }
}

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

#article-container > .authors {
	display: flex;
	color: #207175;
}
@media (min-width: 1290px)	  { #article-container > .authors { padding: 430px 15px 0; } }
@media (max-width: 1289.99px) { #article-container > .authors { margin-top: 50px; } }
#article-container > .authors > .author { max-width: 140px; }
@media (min-width: 1390px)	  {
	#article-container > .authors {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		column-gap: 10px;
	}
	#article-container > .authors > .author { flex: 1; min-width: calc((100% - 40px) / 2); }
}
@media (max-width: 1389.99px) and (min-width: 1290px) {
	#article-container > .authors {
		flex-direction: column;
		align-items: center;
		row-gap: 20px;
	}
	#article-container > .authors > .author { width: 100%; }
}
@media (max-width: 1289.99px) {
	#article-container > .authors {
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		column-gap: 10px;
		padding-right: 45px;
	}
	#article-container > .authors > .author { width: 140px; }
}
#article-container > .authors > .author > .avatar {
	position: relative;
	padding-top: 130%;
	margin-bottom: 15px;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#article-container > .authors > .author > .avatar:before {
	content: '';
	position: absolute; top: 0; left: 0; bottom: 0; right: 0;
	
	background-color: #207175;
	
	opacity: 0; transition: opacity .2s ease-out;
	
	pointer-events: none;
}
#article-container > .authors > .author:hover > .avatar:before { opacity: .5; }
#article-container > .authors > .author > .complex-title {
	margin-bottom: 10px;
	font-size: 20px;
}
#article-container > .authors > .author > .complex-title > span { display: block; }
#article-container > .authors > .author > .role {
	text-transform: uppercase;
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 2px;
}

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

#article-container > .article {}
@media (min-width: 990px) { #article-container > .article { min-width: 900px; } }
#article-container > .article > .thumbnail {
	height: 670px;
	margin-bottom: 55px;
	
	background-image: url("../../images/post-bg.jpg");
	background-position: center;
	background-size: cover;
}
@media (max-width: 1289.99px) { #article-container > .article > .thumbnail { margin-left: -45px; } }
@media (min-width: 990px)	 { #article-container > .article > .thumbnail ~ * { margin-right: calc(100% / 3); } }
@media (max-width: 989.99px) { #article-container > .article > .thumbnail ~ * { margin-right: 45px; } }
#article-container > .article > .date {
	margin-bottom: 20px;
	font-size: 40px;
}
#article-container > .article > .category { margin-bottom: 15px; }
#article-container > .article > .title {
	margin-bottom: 55px;
	
	line-height: 120%;
	font-weight: 700;
}
@media (min-width: 990px)	 { #article-container > .article > .title { font-size: 52px; } }
@media (max-width: 989.99px) { #article-container > .article > .title { font-size: 32px; } }
#article-container > .article > .body {
	line-height: 200%;
	font-size: 15px;
}
#article-container > .article > .body > * { margin: 0 0 30px; }
#article-container > .article > .body > :last-child { margin: 0; }