Merge branch 'develop'

package.json

@@ -47,5 +47,5 @@
     "clean": "rm -rf build _jekyll/_site docs/templates node_modules/ yarn-error.log .bundle",
     "build-examples": "gulp build-examples"
   },
-  "version": "1.7.0-beta-2"
+  "version": "1.7.0-beta-2.1"
 }

scss/_patterns_heading-icon.scss

@@ -3,17 +3,32 @@
 @mixin vf-p-heading-icon {
 
   .p-heading-icon {
+    margin-bottom: $spv-inter--regular;
+
+    @media (min-width: $breakpoint-medium) {
+      margin-bottom: 0;
+    }
+
     &__header {
       display: flex;
+      margin-bottom: $spv-intra--expanded;
+    }
+
+    &__title {
+      margin-bottom: 0;
+      padding-top: 0;
     }
 
     &__img {
-      align-self: flex-start;
       flex-shrink: 0;
-      margin: auto $sph-inter auto 0  ;
-      max-height: map-get($icon-sizes, thumb);
-      max-width: map-get($icon-sizes, thumb);
-      padding-bottom: $spv-inter--regular; // sets white space under to the min white space under the smalllest heading that can sit next to it (muted-heading)
+      height: map-get($icon-sizes, heading-icon--small);
+      margin-right: $sph-intra;
+      width: map-get($icon-sizes, heading-icon--small);
+
+      @media (min-width: $breakpoint-medium) {
+        height: map-get($icon-sizes, heading-icon);
+        width: map-get($icon-sizes, heading-icon);
+      }
     }
   }
 }

scss/_settings_spacing.scss

@@ -97,7 +97,9 @@ $icon-sizes: (
   default: 2 * $sp-unit,
   thumb--card: 4 * $sp-unit,
   social: 5 * $sp-unit,
+  heading-icon--small: $sp-unit * 5,
   thumb--small: $sp-unit * 6,
+  heading-icon: $sp-unit * 7.5,
   thumb: $sp-unit * 10,
   thumb--large: $sp-unit * 12
 );

scss/_settings_system.scss

@@ -1,2 +1,2 @@
 // Global system settings
-$app-version: '1.7.0-beta-2' !default;
+$app-version: '1.7.0-beta-2.1' !default;