Index: branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss
===================================================================
--- branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss	(revision 43860)
+++ branches/5.0/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss	(revision 43892)
@@ -2,4 +2,7 @@
 
 .site-header.featured-image {
+
+	/* Hide overflow for overflowing featured image */
+	overflow: hidden;
 
 	/* Need relative positioning to properly align layers. */
@@ -7,5 +10,5 @@
 
 	/* Add text shadow to text, to increase readability. */
-	text-shadow: 0 1px 2px rgba(black, 0.35);
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
 
 	/* Set white text color when featured image is set. */
@@ -55,89 +58,120 @@
 	.site-featured-image svg {
 		/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
-		-webkit-filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
-				filter: drop-shadow(0 1px 2px rgba(black, 0.35) );
+		-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
+				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35) );
 	}
 
 	/* Entry header */
-
-	.site-featured-image .entry-header {
-		margin-top: calc( 4 * #{$size__spacing-unit});
-		margin-bottom: 0;
-		margin-left: 0;
-		margin-right: 0;
-
-		@include media (tablet) {
-
-			margin-left: calc(2 * (100vw / 12));
-			margin-right: calc(2 * (100vw / 12));
-		}
-
-		.entry-title {
-
-			&:before {
-				background: $color__background-body;
-			}
-		}
-
-		/* Entry meta */
-
-		.entry-meta {
-
-			font-weight: 500;
-
-			> span {
-
-				margin-right: $size__spacing-unit;
-				display: inline-block;
-
-				&:last-child {
-					margin-right: 0;
-				}
-			}
-
-			a {
-
-				@include link-transition;
-				color: currentColor;
-
-				&:hover {
-					text-decoration: none;
-				}
-			}
-
-			.svg-icon {
-				position: relative;
-				display: inline-block;
-				vertical-align: middle;
-				margin-right: 0.5em;
-			}
-
-			.discussion-avatar-list {
-				display: none;
-			}
-		}
-
-		&.has-discussion {
+	.site-featured-image {
+
+		/* First layer: grayscale. */
+		.post-thumbnail img {
+			height: auto;
+			left: 50%;
+			max-width: 1000%;
+			min-height: 100%;
+			min-width: 100vw;
+			position: absolute;
+			top: 50%;
+			transform: translateX(-50%) translateY(-50%);
+			width: auto;
+			z-index: 1;
+
+			@supports ( object-fit: cover ) {
+				height: 100%;
+				left: 0;
+				object-fit: cover;
+				top: 0;
+				transform: none;
+				width: 100%;
+			}
+
+			/* When image filters are active, make it grayscale to colorize it blue. */
+			.image-filters-enabled & {
+				filter: grayscale(100%);
+			}
+		}
+
+		.entry-header {
+
+			margin-top: calc( 4 * #{$size__spacing-unit});
+			margin-bottom: 0;
+			margin-left: 0;
+			margin-right: 0;
 
 			@include media (tablet) {
 
-				.entry-meta {
-					display: flex;
+				margin-left: $size__site-margins;
+				margin-right: $size__site-margins;
+			}
+
+			.entry-title {
+
+				&:before {
+					background: $color__background-body;
+				}
+			}
+
+			/* Entry meta */
+
+			.entry-meta {
+
+				font-weight: 500;
+
+				> span {
+
+					margin-right: $size__spacing-unit;
+					display: inline-block;
+
+					&:last-child {
+						margin-right: 0;
+					}
+				}
+
+				a {
+
+					@include link-transition;
+					color: currentColor;
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+
+				.svg-icon {
 					position: relative;
-				}
-
-				.entry-title {
-					padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
-				}
-
-				.entry-meta .comment-count {
-					position: absolute;
-					right: 0;
-				}
-
-				.entry-meta .discussion-avatar-list {
-					display: block;
-					position: absolute;
-					bottom: 100%;
+					display: inline-block;
+					vertical-align: middle;
+					margin-right: 0.5em;
+				}
+
+				.discussion-avatar-list {
+					display: none;
+				}
+			}
+
+			&.has-discussion {
+
+				@include media (tablet) {
+
+					.entry-meta {
+						display: flex;
+						position: relative;
+					}
+
+					.entry-title {
+						padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
+					}
+
+					.entry-meta .comment-count {
+						position: absolute;
+						right: 0;
+					}
+
+					.entry-meta .discussion-avatar-list {
+						display: block;
+						position: absolute;
+						bottom: 100%;
+					}
 				}
 			}
@@ -171,5 +205,4 @@
 
 	/* Set up image filter layer positioning */
-	.site-branding-container:before,
 	.site-branding-container:after,
 	.site-featured-image:before,
@@ -185,5 +218,5 @@
 
 	/* Background & Effects */
-	/* Shared background settings between pseudo elements. See .site-branding-container */
+	/* Shared background settings between pseudo elements. */
 	background-position: center;
 	background-repeat: no-repeat;
@@ -191,17 +224,4 @@
 
 	/* The intensity of each blend mode is controlled via layer opacity. */
-
-	/* First layer: grayscale. */
-  	.site-branding-container:before {
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: cover;
-		z-index: 1;
-
-		/* When image filters are active, make it grayscale to colorize it blue. */
-		.image-filters-enabled & {
-			filter: grayscale(100%);
-		}
-	}
 
 	/* Second layer: screen. */
@@ -213,6 +233,6 @@
 
 	/* Third layer: multiply. */
-  	/* When image filters are inactive, a black overlay is added. */
-  	.site-featured-image:after {
+	/* When image filters are inactive, a black overlay is added. */
+	.site-featured-image:after {
 		background: #000;
 		mix-blend-mode: multiply;
@@ -234,5 +254,5 @@
 	/* Fourth layer: overlay. */
   	.image-filters-enabled & .site-branding-container:after {
-		background: rgba(#000, 0.35);
+		background: rgba(0, 0, 0, 0.35);
 		mix-blend-mode: overlay;
 		opacity: 0.5;
@@ -253,5 +273,5 @@
 		 */
 		transition: opacity 1200ms ease-in-out;
-	  	opacity: 0.7;
+		opacity: 0.7;
 		z-index: 5;
 
