.post__thumbnail {
	margin: 0;
	max-height: 10em;
	overflow: hidden;
	padding-bottom: calc(var(--go-featured-image--height, 35%) * 1.5);
	position: relative;
	z-index: 0;

	@include media(medium) {
		padding-bottom: var(--go-featured-image--height, 35%);
	}
	@include media(xlarge) {
		padding-bottom: calc(var(--go-featured-image--height, 35%) / 1.5);
	}

	&::after {
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0, transparent 40%);
		bottom: 0;
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	& img {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}
}

.header-1.has-featured-image,
.header-2.has-featured-image,
.header-3.has-featured-image,
.header-4.has-featured-image {

	& .header {
		position: absolute;
		top: 0;
		width: 100%;
	}

	&.admin-bar .header {
		top: 32px;

		@include media(admin-bar-only) {
			top: 46px;
		}
	}
}
