.posts {
	margin: 0 auto;
}
    .posts-action {
        margin-bottom: 0;
    }
    .posts-item {
        background-color: #fff;
        margin-bottom: 1.5rem;
        padding: 1.5em;
        box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.19);
		position: relative;
		transition: all .5s;
    }
    	.posts-linked a {
			position: relative;
			z-index: 1;
		}
		.posts-linked:hover,
		.posts-linked:focus {
			transition: all .3s;
			transform: scale(1.0075);
			box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.25);
		}
		.posts-linked:hover .posts-title,
		.posts-linked:focus .posts-title {
			text-decoration: underline;
		}
		.posts-linked:hover .posts-action,
		.posts-linked:focus .posts-action {
			color: #FFCC00;
		}
	.posts-head {
		display: flex;
	}
    .posts-thumb {
		flex-shrink: 0;
		flex-grow: 0;
		width: 7em;
		height: 7em;
		box-shadow: 3px 3px 0px rgba(0,0,0,.2);
		margin-bottom: 1rem;
	}
	.posts-thumb a {
		width: 100%;
		height: 100%;
		display: block;
	}
    .posts-intro {
		flex-grow: 1;
		padding-left: 1.5rem;
	}
	.posts-body {}
	.posts-foot {
		align-self: flex-end;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
    a.posts-link {
		position: static;
		transition: all .3s;
	}
		.posts-linked .posts-link:before {
			content: '';
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
		}
		.posts-linked .posts-title:hover,
		.posts-linked .posts-title:focus {
			text-decoration: underline;
		}
		.posts-title {
			font-family: roboto-slab, arial, sans-serif;
			font-size: 1.6em;
			line-height: 1.1;
			color: #312F48;
			margin-bottom: 1rem;

			text-transform: inherit;
		}
		
	.posts-summary {
		margin-bottom: 1.5rem;
	}
	.posts-tags {
		flex-shrink: 1;
		flex-grow: 1;
	}
	.posts-action {
		flex-shrink: 0;
		font-weight: 500;
		font-size: 0.755rem;
		color: #413C75;
		letter-spacing: 2.06px;
		text-align: right;
		text-transform: uppercase;
		padding-bottom: .4rem;
	}
		.posts-action i {
		}
		.posts-action:hover,
		.posts-action:focus {
			color: #FFCC00;
		}
	.posts_columns {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}
		.posts_columns .posts-item {
			/*flex-basis: 49%; This causes issues in IE11 because padding is added in addition to it*/
			width: 49%;
			display: flex;
			flex-wrap: wrap;
		}
			.posts_columns .posts-item > div {
				width: 100%;
			}
		.posts_columns .posts-title {
			font-size: 1.4em;
		}
		.posts_columns .posts-foot {
			align-self: flex-end;
		}
	@media (max-width: 1050px) {
		.posts_columns {
			display: block;
			max-width: 45rem;
		}
		.posts_columns .posts-item {
			width: auto;
		}
	}
	@media (max-width: 1024px) {
		.posts-title {
			font-size: 1.4em;
		}
	}
	@media (max-width: 600px) {
		.posts-head {
			font-size: .9em;
		}
		.posts-foot {
			display: block;
		}
		.posts-tags {
			margin-bottom: 1rem;
			text-align: center;
		}
		.posts-action {
			display: block;
			padding-bottom: 0;
			text-align: center;
		}
	}
	@media (max-width: 550px) {
		.posts-head {
			display: block;
		}
		.posts {
			max-width: 22rem;
		}
		.posts-intro {
			padding-left: 0;
		}
		.posts-thumb {
			width: 100%;
			height: 9em;
			font-size: 1.5em;
		}
	}

		
.metadata {
	margin-bottom: .75rem;
}
	.metadata-item {
		letter-spacing: .08rem;
		margin-right: 1rem;
		display: inline-block;
	}

.author {}
	.author-link {
		transition: all .3s;
		display: inline-block;
	}
		.author-link:hover, .author-link:focus {
			color: #FFCC00;
			transition: all .3s;
		}
		.author-link:hover small {
			text-decoration: underline;
		}