#crosslinks { margin-top: 195px; }

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

#crosslinks > .content-wrapper > main {}
#crosslinks > .content-wrapper > main > .complex-title { margin-bottom: 70px; }
#crosslinks > .content-wrapper > main > .posts {
	display: flex; max-width: 900px;
	flex-direction: row;
	flex-wrap: wrap;
}
#crosslinks > .content-wrapper > main > .posts > .post {
	position: relative;
	overflow: hidden;
}
@media (min-width: 900px)		 					{ #crosslinks > .content-wrapper > main > .posts > .post { flex: 0 0 calc(100% / 3); } }
@media (max-width: 899.99px) and (min-width: 700px) { #crosslinks > .content-wrapper > main > .posts > .post { flex: 0 0 calc(100% / 2); } }
@media (max-width:  699.99px)						{ #crosslinks > .content-wrapper > main > .posts > .post { flex: 0 0 100%; } }
#crosslinks > .content-wrapper > main > .posts > .post > .thumbnail {
	background-position: center;
	background-size: cover;
}
#crosslinks > .content-wrapper > main > .posts > .post > .thumbnail:before {
	content: "";
	display: block;
	padding-top: 130%;
}
#crosslinks > .content-wrapper > main > .posts > .post > .overlay {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
	
	background-image: linear-gradient(to top right, rgba(19,96,100,.8), transparent 80%);
	
	color: #FFF;
}
#crosslinks > .content-wrapper > main > .posts > .post > .overlay > .complex-title {
	line-height: 120%;
	font-weight: 700;
}
@media (min-width: 1200px)	  { #crosslinks > .content-wrapper > main > .posts > .post > .overlay > .complex-title { font-size: 25px; } }
@media (max-width: 1199.99px) { #crosslinks > .content-wrapper > main > .posts > .post > .overlay > .complex-title { font-size: 26px; } }