.row {
	&.narrow {
		max-width: 800px;
	}
}

.row-relative {
	position: relative;
}


.site-main {
	.post {
		padding-bottom: 30px;
		margin-bottom: 30px;
		border-bottom: 6px solid #F7F7F7;
		display: flex;

		.post-content {
			flex: 1 1 70%;
			width: calc(70% - 20px); // We need to fit the thumbnail if it exists, if not, flex will handle the growth

			@media (max-width: 1024px) {
				width: 100%;
				flex: 1 1 100%;
			}
		}

		.post-thumbnail {
			flex: 0 0 30%;
		}

		a {
			color: #ff5800;
		}

		&.sticky {
			.posted-on {
				position: relative;
				padding-left: 60px;

				&:before {
					content: 'STICKY';
					width: 52px;
					height: 16px;
					position: absolute;
					display: table;

					top: 3px;
					left: 0;

					padding: 2px 0;

					font-size: 12px;
					font-weight: 600;
					text-align: center;

					color: #ffffff;
					background: #ff5800;
				}
			}
		}
	}
}

.single {
	.post {
		a {
			text-decoration: underline;
		}
	}

	.posted-on {
		a {
			text-decoration: none;
		}
	}
}

.post-thumbnail {
	padding-left: 20px;
	padding-top: 28px;

	.entry-thumbnail {
		width: 240px;
		height: 170px;
		border-radius: 10px;
		background-size: cover;
	}
}

@media (max-width: 1024px) {
	.section-main {
		.site-main {
			.post {
				padding-left: 70px;
				flex-flow: column;
				margin-bottom: 10px;

				.post-thumbnail {
					display: none;
					padding-left: 0;

					.entry-thumbnail {
						display: none;
					}
				}
			}
		}
	}

	.search {
		.section-main {
			.site-main {
				.post {
					padding-left: 0;
				}
			}
		}
	}
}

@media (max-width: $breakpoint-small) {
	.section-main {
		.site-main {
			.post {
				padding-left: 0px;
			}
		}
	}
}