// add bottom borders to posts
.blogPosts {
	article,
	section {
		border-bottom: 1px solid $border;
		padding: ($small-space * 3) 0;
		@media #{$small-only}{
			padding-right: ($grid-gutter-medium / 2);
			padding-left: ($grid-gutter-medium / 2);
		}
	}
	// remove last border
	.columns {
		&:last-of-type {
			article,
			section {
				border-bottom: none;
			}
		}
	}
}
// space out posts
article,
section {
	margin-bottom: $medium-space;
	article,
	section {
		padding-bottom: ($small-space * 2);
		border-bottom: 1px solid $border;
		&.entry-content {
			margin-bottom: $large-space;
		}
	}
	section {
		margin: 0;
		// pull in the content
		.singleContent {
			padding: $medium-space $large-space;
			@media #{$small-only}{
				padding: $medium-space 0;
			}
		}
	}
	h1.page-title {
		font-size: rem-calc(20);
	}
	// single posts
	&.post,
	&.page {
		margin-top: 0;
		&.innerPost {
			padding-top: 0;
			section {
				padding-top: 0;
			}
		}
	}
	// titles
	h1,
	h2 {
		font-size: rem-calc(22);
		font-weight: 400;
		a:not(.button) {
			font-weight: 400;
			color: $body-font-color;
		}
	}

	// style any p tags
	p {
		&.categories {
			span {
				margin-bottom: 0;
			}
		}
	}
	// category
	span {
		font-size: rem-calc(12);
		margin-bottom: $small-space;
		display: inline-block;
		&:not(:last-of-type){
			margin-right: $medium-space;
			&:after {
				content: "";
			    display: inline-block;
			    border: 1px solid;
			    font-size: rem-calc(12);
			    margin-left: 9px;
			    position: absolute;
			    top: 50%;
			    margin-top: -3px;
			    width: 3px;
			    height: 3px;
			    transform: rotate(45deg);
			}
		}
		a:not(.button){
			color: rgba($body-font-color, 0.5);
		}
	}
	// date
	.byline {
		font-size: rem-calc(12);
		opacity: 0.5;
		margin-bottom: ($small-space * 2);
	}
	// inner post fetaured image
	.tile {
		margin-bottom: $medium-space;
	}
	img,
	.wp-post-image {
		width: 100%;
		height: auto;
		margin-bottom: $medium-space;
	}
}
// for any images outside of the archive
// inner post fetaured image
.tile {
	&:after {
		@include pseudo;
		border: 1px solid #ffffff;
		top: ($small-space * 2);
		left: ($small-space * 2);
		bottom: ($small-space * 3);
		right: ($small-space * 2);
	}
	img {
		margin-bottom: 0;
	}
}