Add grid-gap mixin and better image filenames

assets/scss/2-tools/_mixins.scss

@@ -78,4 +78,18 @@
 // $media-type - {String} ($mq-media-type) Media type: screen, print…
 //
 // Styleguide 2.1.4
-//
+//
+
+
+// @mixin gap
+//
+// This is to account for the eminent deprecation of [`grid-gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). Some browsers honor `gap`, while others are living in the past with `grid-gap`. This keeps us working for both names. Eventually, we can remove this mixin in favor of just using gap. The new `gap` naming is introduced on Chrome 68+, Safari 11.2, Firefox 61+, and Edge 16+<br>Example: `.my-grid { @include gap($size-m) }`
+//
+// $size = $size-b - Size of gap
+//
+// Styleguide 2.1.3
+//
+@mixin gap($size: $size-b) {
+  grid-gap: $size;
+  gap: $size;
+}

assets/scss/6-components/blast-header/_blast-header.scss

@@ -32,9 +32,9 @@ $blast-header-height: 18rem;
   @supports (display: grid) {
     @include mq($from: bp-m) {
       &__inner {
+        @include gap;
         display: grid;
         grid-template-columns: 1fr 1fr;
-        grid-gap: $size-b;
       }
 
       &__col {

assets/scss/6-components/blast-header/blast-header.html

@@ -1,11 +1,11 @@
-<header class="c-blast-header l-align-center-children has-bg-black-off has-text-white has-l-btm-marg" style="background-image: url('/img/blast-header/TT-Blast-landing_photo.jpg')">
+<header class="c-blast-header l-align-center-children has-bg-black-off has-text-white has-l-btm-marg" style="background-image: url('/img/blast-header/c-blast-header-bg.jpg')">
   <div class="c-blast-header__inner l-container l-width-full has-page-padding">
     <div class="c-blast-header__col c-blast-header__col--brand">
-      <a class="l-display-block" href="/theblast/"><img class="l-width-max" src="/img/blast-header/TT-TheBlast-logo_PSvitek.png" alt="The Blast Logo"></a>
+      <a class="l-display-block" href="/theblast/"><img class="l-width-max" src="/img/blast-header/c-blast-header-logo.png" alt="The Blast Logo"></a>
     </div>
     <div class="c-blast-header__col c-blast-header__col--title l-align-center-self">
       <h1 class="is-hidden-until-bp-m t-size-m has-s-btm-marg">The best political<br>newsletter in Texas.</h1>
-      <a class="l-display-block" href="/"><img class="c-blast-header__logo l-width-max" src="/img/blast-header/TT-aprojectby-horizontal-white.svg" alt="A project by The Texas Tribune"></a>
+      <a class="l-display-block" href="/"><img class="c-blast-header__logo l-width-max" src="/img/blast-header/c-blast-header-attribution-logo.svg" alt="A project by The Texas Tribune"></a>
     </div>
   </div>
 </header>

assets/scss/6-components/checkbox/_checkbox.scss

@@ -6,9 +6,8 @@
 //
 // Styleguide 6.1.5
 .c-checkbox {
+  @include gap;
   display: grid;
-  gap: $size-b;
-  grid-gap: $size-b;
   grid-template-columns: .2rem 1fr;
 
   &__box {

assets/scss/6-components/share/_share.scss

@@ -10,8 +10,8 @@ $share-width: $size-xxxl;
 $share-gap: $size-m;
 
 .c-share {
+  @include gap($share-gap);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($share-width, 1fr));
   grid-template-rows: repeat(auto-fit, minmax($share-height, 1fr));
-  grid-gap: $share-gap;
 }

assets/scss/6-components/sponsor-card/_sponsor-card.scss

@@ -9,9 +9,9 @@ $c-sponsor-card-padding: $size-s;
 $c-sponsor-card-min: 300px;
 
 .c-sponsor-card {
+  @include gap($c-sponsor-card-padding);
   border-top: 5px solid $color-sponsor;
   display: grid;
-  grid-gap: $c-sponsor-card-padding;
   grid-template-columns: repeat(auto-fit, minmax($c-sponsor-card-min, auto));
   padding: ($c-sponsor-card-padding * 3) $c-sponsor-card-padding
     $c-sponsor-card-padding;