@mixin pie-clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin bp( $point ) {
	@if $point == 'mobile' {
		@media screen and ( max-width: 480px ) {
			@content;
		}
	}
}

.tesseract-post-list {
	.tesseract-post-compact {
		@include pie-clearfix;
		padding: 30px 0 40px;
		border-bottom: 1px solid #DDD;
		.post-header {
			float: left;
			width: 30%;
			margin-right: 5%;
			.featured-image {
				img {
					max-width: 100%;
					height: auto;
				}
			}
			.date, .author {
				color: #888;
			}
			.date {
				font-weight: 700;
			}
		}
		.entry {
			float: left;
			width: 65%;
			.title {
				font-size: 28px;
				word-spacing: -1px;
				line-height: 1.3;
				margin-top: 0;
				margin-bottom: 10px;
				font-weight: 700;
			}
			.content {
				font-size: 14px;
			}
		}
		@include bp( mobile ) {
			.post-header, .entry {
				float: none;
				width: 100%;
			}
		}
	}

	.tesseract-post-vertical {
		padding: 30px 0 40px;
		border-bottom: 1px solid #DDD;
		.post-header {
			margin-bottom: 20px;
			.author-and-date {
				color: #888;
				font-weight: 700;
			}
			.title {
				font-size: 28px;
				word-spacing: -1px;
				line-height: 1.3;
				margin-top: 0;
				margin-bottom: 20px;
				font-weight: 700;
			}
			.featured-image {
				max-height: 480px;
				overflow: hidden;
				img {
					max-width: 100%;
					height: auto;
				}
			}
		}
	}
}

.tesseract-pagination {
	.page-numbers {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: center;
		li {
			display: inline-block;
			margin-right: 5px;
			a {
				display: inline-block;
				padding: 5px;
			}
		}
	}
}