Adds min heigth and background color to headers so that image loading state doesn't break the layout.

src/assets/scss/_gutenberg-support.scss

@@ -38,6 +38,7 @@
 // use 1526px - 1 column - 1 column;
 .wp-block-image.alignwide>img {
     max-width: 1400px !important;
+    width: calc(100% - 12.5%) !important;
     width: calc(100vw - 12.5vw) !important;
     padding: 0 !important;
     left: 0px;

src/assets/scss/_header-taxonomy.scss

@@ -32,6 +32,7 @@
             background-repeat: no-repeat;
             background-size: cover;
             background-position: center;
+            background-color: #f2f2f2;
 
             @media only screen and (min-width: 641px) and (max-width: 992px) {
                 height: 37.5%;

src/assets/scss/_home-collection.scss

@@ -26,6 +26,7 @@
         max-width: 215px;
         bottom: -111px; // 215px/2 + 4px 
         border-width: 4px !important;
+        background-color: #f2f2f2;
 
         // Above this point, the container should not be larger
         // 1400px is the maximum the inner cointainer should get, so we 

src/assets/scss/style.scss

@@ -738,6 +738,8 @@ nav{
     margin: 0 auto;
     object-fit: cover;
     display: block;
+    min-height: 140px; // Important when loading img source file.
+    background-color: #f2f2f2;
 }
 .page-header.page-header--image-full {
     height: auto;