diff --git a/src/scss/components/_audio.scss b/src/scss/components/_audio.scss
index f55a2490..9b3fa886 100644
--- a/src/scss/components/_audio.scss
+++ b/src/scss/components/_audio.scss
@@ -7,7 +7,7 @@
 
 .audio__embed {
   position: relative;
-  padding-top: math.percentage(9 / 16);
+  padding-top: math.percentage(math.div(9, 16));
 
   iframe {
     position: absolute;
diff --git a/src/scss/components/_banner.scss b/src/scss/components/_banner.scss
index 5e2b60ff..76e8f9bf 100644
--- a/src/scss/components/_banner.scss
+++ b/src/scss/components/_banner.scss
@@ -33,10 +33,10 @@
   .banner__bottom-line {
     position: absolute;
     display: block;
-    width: math.percentage(12 / 12);
+    width: math.percentage(math.div(12, 12));
 
     @include breakpoints.breakpoint(sm) {
-      width: math.percentage(9 / 12);
+      width: math.percentage(math.div(9, 12));
     }
   }
 
diff --git a/src/scss/components/_college-homepage-grid-header.scss b/src/scss/components/_college-homepage-grid-header.scss
index be23fcd5..f9264c9c 100644
--- a/src/scss/components/_college-homepage-grid-header.scss
+++ b/src/scss/components/_college-homepage-grid-header.scss
@@ -5,7 +5,7 @@
 
 @use "sass:map";
 $homepage-animation-duration: 8;
-$homepage-animation-sub-duration: $homepage-animation-duration / 4;
+$homepage-animation-sub-duration: $homepage-animation-duration * 0.25;
 
 $text-colors: (
   1: #75a3cd,
@@ -117,7 +117,7 @@ $accessible-text-colors: (
     display: block;
     opacity: 0;
     animation: #{$homepage-animation-sub-duration +
-      ($homepage-animation-sub-duration / 2)}s ease-in-out;
+      ($homepage-animation-sub-duration * 0.5)}s ease-in-out;
     animation-play-state: inherit;
     font-size: variables.$typescale-7;
     width: calc(11 / 12 * 100%);
@@ -218,7 +218,7 @@ $accessible-text-colors: (
     p {
       padding-bottom: variables.$spacing-3;
       animation: #{$homepage-animation-sub-duration +
-        ($homepage-animation-sub-duration / 2)}s ease-in-out;
+        ($homepage-animation-sub-duration * 0.5)}s ease-in-out;
       font-size: variables.$typescale-2;
 
       @include breakpoints.breakpoint(md) {
@@ -239,7 +239,7 @@ $accessible-text-colors: (
       color: variables.$navy;
       font-weight: variables.$font-weight-bold;
       animation: #{$homepage-animation-sub-duration +
-        ($homepage-animation-sub-duration / 2)}s ease-in-out;
+        ($homepage-animation-sub-duration * 0.5)}s ease-in-out;
       animation-play-state: inherit;
     }
 
diff --git a/src/scss/components/_datepicker.scss b/src/scss/components/_datepicker.scss
index 8a3f796f..edaa7fb0 100644
--- a/src/scss/components/_datepicker.scss
+++ b/src/scss/components/_datepicker.scss
@@ -2,25 +2,25 @@
 
 
 @use '../../../node_modules/pikaday/scss/pikaday' with (
-  $pd-text-color: $black,
-  $pd-title-color: $color-primary,
-  $pd-title-bg: $white,
-  $pd-picker-bg: $white,
-  $pd-picker-border: $border-color,
-  $pd-picker-border-bottom: $border-color,
+  $pd-text-color: variables.$black,
+  $pd-title-color: variables.$color-primary,
+  $pd-title-bg: variables.$white,
+  $pd-picker-bg: variables.$white,
+  $pd-picker-border: variables.$border-color,
+  $pd-picker-border-bottom: variables.$border-color,
   $pd-picker-shadow: none,
-  $pd-th-color: $black,
-  $pd-day-color: $color-primary,
+  $pd-th-color: variables.$black,
+  $pd-day-color: variables.$color-primary,
   $pd-day-bg: transparent,
-  $pd-day-hover-color: $color-primary,
-  $pd-day-hover-bg: $gray-light,
-  $pd-day-today-color: $color-primary,
-  $pd-day-selected-color: $white,
-  $pd-day-selected-bg: $color-primary,
+  $pd-day-hover-color: variables.$color-primary,
+  $pd-day-hover-bg: variables.$gray-light,
+  $pd-day-today-color: variables.$color-primary,
+  $pd-day-selected-color: variables.$white,
+  $pd-day-selected-bg: variables.$color-primary,
   $pd-day-selected-shadow: transparent,
   $pd-day-disabled-color: #999,
   $pd-week-color: #999,
-  $pd-font-family: $font-family-sans-serif
+  $pd-font-family: variables.$font-family-sans-serif
 );
 
 .pika-single {
diff --git a/src/scss/components/_davis-header.scss b/src/scss/components/_davis-header.scss
index f376a14d..2a819bf4 100644
--- a/src/scss/components/_davis-header.scss
+++ b/src/scss/components/_davis-header.scss
@@ -170,7 +170,7 @@
   top: 100%;
   left: 0;
   background-color: variables.$black;
-  padding: #{variables.$spacing-3 / 2} variables.$spacing-3;
+  padding: #{variables.$spacing-3 * 0.5} variables.$spacing-3;
   transition: opacity 0.2s;
   opacity: 0;
   visibility: hidden;
@@ -246,8 +246,8 @@
 }
 
 .davis-nav__link--sub {
-  padding-top: variables.$spacing-3 / 2;
-  padding-bottom: variables.$spacing-3 / 2;
+  padding-top: variables.$spacing-3 * 0.5;
+  padding-bottom: variables.$spacing-3 * 0.5;
   font-size: variables.$typescale-2;
 
   &:hover,
diff --git a/src/scss/components/_dispatches-item.scss b/src/scss/components/_dispatches-item.scss
index 769816d9..1350fd01 100644
--- a/src/scss/components/_dispatches-item.scss
+++ b/src/scss/components/_dispatches-item.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use "../core/functions";
 @use "../core/variables";
 @use "../mixins/breakpoints";
@@ -55,7 +57,7 @@ $dispatches-card-height: 470px;
     display: block;
     content: '';
     width: 100%;
-    padding-top: (9 / 16) * 100%;
+    padding-top: math.div(9, 16) * 100%;
   }
 
   > .dispatches-item__image {
diff --git a/src/scss/components/_fluencies.scss b/src/scss/components/_fluencies.scss
index b28e4102..b5dbaaf4 100644
--- a/src/scss/components/_fluencies.scss
+++ b/src/scss/components/_fluencies.scss
@@ -129,11 +129,11 @@
         &::before {
           content: '';
           display: block;
-          padding-top: math.percentage(143/166);
+          padding-top: math.percentage(math.div(143, 166));
           width: 100%;
 
           @include breakpoints.breakpoint(xl) {
-            padding-top: math.percentage(133/166);
+            padding-top: math.percentage(math.div(133, 166));
           }
         }
 
diff --git a/src/scss/components/_gallery.scss b/src/scss/components/_gallery.scss
index fcf9be62..4471f930 100644
--- a/src/scss/components/_gallery.scss
+++ b/src/scss/components/_gallery.scss
@@ -8,7 +8,7 @@
 
 .gallery__image {
   position: relative;
-  padding-top: math.percentage(9 / 16);
+  padding-top: math.percentage(math.div(9, 16));
   height: 0;
   overflow: hidden;
 
diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss
index 6531bb44..76eb290f 100644
--- a/src/scss/components/_grid.scss
+++ b/src/scss/components/_grid.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use "../core/variables";
 @use "../mixins/grid";
 @use "../mixins/grid-framework";
@@ -27,13 +29,13 @@
 }
 
 .row--sm-gutters {
-  margin-right: (variables.$grid-gutter-width / -2) !important;
-  margin-left: (variables.$grid-gutter-width / -2) !important;
+  margin-right: math.div(variables.$grid-gutter-width, -2) !important;
+  margin-left: math.div(variables.$grid-gutter-width, -2) !important;
 
   > .col,
   > [class*='col-'] {
-    padding-left: variables.$grid-gutter-width / 2;
-    padding-right: variables.$grid-gutter-width / 2;
+    padding-left: variables.$grid-gutter-width * 0.5;
+    padding-right: variables.$grid-gutter-width * 0.5;
   }
 }
 
diff --git a/src/scss/components/_journey-modal.scss b/src/scss/components/_journey-modal.scss
index ab257cce..9c48b7d6 100644
--- a/src/scss/components/_journey-modal.scss
+++ b/src/scss/components/_journey-modal.scss
@@ -892,18 +892,18 @@ $school-theme-colors: (
           display: block;
           content: '';
           width: 100%;
-          padding-top: math.percentage(185/288);
+          padding-top: math.percentage(math.div(185, 288));
 
           @include breakpoints.breakpoint(md) {
-            padding-top: math.percentage(255/272);
+            padding-top: math.percentage(math.div(255, 272));
           }
 
           @media only screen and (min-width: 1200px) {
-            padding-top: math.percentage(200/330);
+            padding-top: math.percentage(math.div(200, 330));
           }
 
           @include breakpoints.breakpoint(xl) {
-            padding-top: math.percentage(9/16);
+            padding-top: math.percentage(math.div(9, 16));
           }
         }
 
diff --git a/src/scss/components/_journey.scss b/src/scss/components/_journey.scss
index f4a45e8f..0f60ab99 100644
--- a/src/scss/components/_journey.scss
+++ b/src/scss/components/_journey.scss
@@ -241,14 +241,14 @@
   position: relative;
   // overflow: hidden;
   align-items: center;
-  padding-top: math.percentage(16/9);
+  padding-top: math.percentage(math.div(16, 9));
 
   @include breakpoints.breakpoint(sm) {
-    padding-top: math.percentage(225/256);
+    padding-top: math.percentage(math.div(225, 256));
   }
 
   @include breakpoints.breakpoint(lg) {
-    padding-top: math.percentage(9/16);
+    padding-top: math.percentage(math.div(9, 16));
   }
 
   .journey-section__background {
diff --git a/src/scss/components/_ls-hero.scss b/src/scss/components/_ls-hero.scss
index 5b53c053..32dbe08c 100644
--- a/src/scss/components/_ls-hero.scss
+++ b/src/scss/components/_ls-hero.scss
@@ -4,7 +4,7 @@
 @use "sass:math";
 .ls-hero {
   position: relative;
-  padding-top: math.percentage(2 / 5);
+  padding-top: math.percentage(2 * 0.2);
   min-height: 480px;
 
   @include breakpoints.breakpoint(md) {
@@ -56,8 +56,8 @@
 .ls-hero__item {
   display: inline-block;
   text-align: center;
-  margin-right: variables.$spacing-4 / 2;
-  margin-left: variables.$spacing-4 / 2;
+  margin-right: variables.$spacing-4 * 0.5;
+  margin-left: variables.$spacing-4 * 0.5;
   margin-bottom: variables.$spacing-2;
 }
 
diff --git a/src/scss/components/_mega-cta.scss b/src/scss/components/_mega-cta.scss
index c9695da1..ce909c97 100644
--- a/src/scss/components/_mega-cta.scss
+++ b/src/scss/components/_mega-cta.scss
@@ -25,7 +25,7 @@
 
   @include breakpoints.breakpoint(md) {
     height: 0;
-    padding-top: math.percentage(9 / 16);
+    padding-top: math.percentage(math.div(9, 16));
     overflow: hidden;
   }
   @include breakpoints.breakpoint(lg) {
diff --git a/src/scss/components/_midd-nav.scss b/src/scss/components/_midd-nav.scss
index b4fcc6a2..33fee3c4 100644
--- a/src/scss/components/_midd-nav.scss
+++ b/src/scss/components/_midd-nav.scss
@@ -177,7 +177,7 @@
   padding-left: variables.$spacing-6;
 
   @include breakpoints.breakpoint(lg) {
-    padding-left: variables.$spacing-4 / 2;
+    padding-left: variables.$spacing-4 * 0.5;
   }
 }
 
diff --git a/src/scss/components/_miis-header.scss b/src/scss/components/_miis-header.scss
index 853e4fa5..a473c3c6 100644
--- a/src/scss/components/_miis-header.scss
+++ b/src/scss/components/_miis-header.scss
@@ -1,5 +1,7 @@
 @use "../core/variables";
 @use "../mixins/breakpoints";
+@use "../components/midd-header";
+@use "../components/institutional-header";
 
 .miis-header {
   @extend .midd-header;
diff --git a/src/scss/components/_page-header.scss b/src/scss/components/_page-header.scss
index 6a3a6eb3..9f577941 100644
--- a/src/scss/components/_page-header.scss
+++ b/src/scss/components/_page-header.scss
@@ -10,7 +10,7 @@
 }
 
 .page-header--has-image {
-  padding-top: math.percentage(2 / 5);
+  padding-top: math.percentage(2 * 0.2);
   height: 0;
   position: relative;
   overflow: hidden;
diff --git a/src/scss/components/_portrait-video.scss b/src/scss/components/_portrait-video.scss
index 8c4bdc3b..e15c2508 100644
--- a/src/scss/components/_portrait-video.scss
+++ b/src/scss/components/_portrait-video.scss
@@ -9,7 +9,7 @@
 
 .portrait-video__content {
   position: relative;
-  padding-bottom: math.percentage(16 / 9);
+  padding-bottom: math.percentage(math.div(16, 9));
 
   img,
   iframe {
diff --git a/src/scss/components/_school-nav.scss b/src/scss/components/_school-nav.scss
index cc7580e5..7d56785c 100644
--- a/src/scss/components/_school-nav.scss
+++ b/src/scss/components/_school-nav.scss
@@ -56,7 +56,7 @@
   top: 100%;
   left: 0;
   background-color: variables.$white;
-  padding: #{variables.$spacing-3 / 2} variables.$spacing-3;
+  padding: #{variables.$spacing-3 * 0.5} variables.$spacing-3;
   border: 1px solid variables.$navy;
   transition: opacity 0.2s;
   opacity: 0;
@@ -112,8 +112,8 @@
 }
 
 .school-nav__link--sub {
-  padding-top: variables.$spacing-3 / 2;
-  padding-bottom: variables.$spacing-3 / 2;
+  padding-top: variables.$spacing-3 * 0.5;
+  padding-bottom: variables.$spacing-3 * 0.5;
   font-size: variables.$typescale-2;
 
   &:hover,
diff --git a/src/scss/components/_spotlight.scss b/src/scss/components/_spotlight.scss
index ee585a70..946b0bc7 100644
--- a/src/scss/components/_spotlight.scss
+++ b/src/scss/components/_spotlight.scss
@@ -17,7 +17,7 @@
 
 .spotlight__figure {
   @include breakpoints.breakpoint(lg) {
-    padding-top: math.percentage(9 / 16);
+    padding-top: math.percentage(math.div(9, 16));
     position: relative;
     height: 0;
     overflow: hidden;
@@ -56,8 +56,8 @@
 
   @include breakpoints.breakpoint(md) {
     // fake column offset with padding plus gutter width
-    padding-left: calc(#{math.percentage(1 / 12)} + #{variables.$grid-gutter-width / 2});
-    padding-right: calc(#{math.percentage(1 / 12)} + #{variables.$grid-gutter-width / 2});
+    padding-left: calc(#{math.percentage(math.div(1, 12))} + #{variables.$grid-gutter-width * 0.5});
+    padding-right: calc(#{math.percentage(math.div(1, 12))} + #{variables.$grid-gutter-width * 0.5});
   }
 
   // place after so largest breakpoint overrides
@@ -73,8 +73,8 @@
     // fake column offset with padding plus gutter width
     padding-top: variables.$spacing-5;
     padding-bottom: variables.$spacing-5;
-    padding-left: calc(#{math.percentage(1 / 12)} + #{variables.$grid-gutter-width / 2});
-    padding-right: calc(#{math.percentage(1 / 12)} + #{variables.$grid-gutter-width / 2});
+    padding-left: calc(#{math.percentage(math.div(1, 12))} + #{variables.$grid-gutter-width * 0.5});
+    padding-right: calc(#{math.percentage(math.div(1, 12))} + #{variables.$grid-gutter-width * 0.5});
   }
 
   // place after so largest breakpoint overrides
diff --git a/src/scss/components/_themed-panel.scss b/src/scss/components/_themed-panel.scss
index e3f53307..9bffd5db 100644
--- a/src/scss/components/_themed-panel.scss
+++ b/src/scss/components/_themed-panel.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @use "../core/variables";
 @use "../mixins/breakpoints";
 @use "../mixins/type";
@@ -39,7 +41,7 @@
     display: block;
     content: "";
     width: 100%;
-    padding-top: (9 / 16) * 100%;
+    padding-top: math.div(9, 16) * 100%;
   }
 
   @include breakpoints.breakpoint(sm) {
diff --git a/src/scss/components/_video.scss b/src/scss/components/_video.scss
index 09930f7c..d3d3e82a 100644
--- a/src/scss/components/_video.scss
+++ b/src/scss/components/_video.scss
@@ -9,7 +9,7 @@
 
 .video__content {
   position: relative;
-  padding-top: math.percentage(9 / 16);
+  padding-top: math.percentage(math.div(9, 16));
   height: 0;
   overflow: hidden;
   background-color: #000;
diff --git a/src/scss/components/_wrmc-header.scss b/src/scss/components/_wrmc-header.scss
index 085e6649..7a12100c 100644
--- a/src/scss/components/_wrmc-header.scss
+++ b/src/scss/components/_wrmc-header.scss
@@ -1,4 +1,4 @@
-school-header.@use "../core/functions";
+@use "../core/functions";
 @use "../core/mixins";
 @use "../core/variables";
 @use "../mixins/breakpoints";
@@ -259,7 +259,7 @@ $school-header-breakpoint: xl;
   top: 100%;
   left: 0;
   background-color: variables.$white;
-  padding: #{variables.$spacing-3 / 2} variables.$spacing-3;
+  padding: #{variables.$spacing-3 * 0.5} variables.$spacing-3;
   border: 1px solid variables.$navy;
   transition: opacity 0.2s;
   opacity: 0;
@@ -319,8 +319,8 @@ $school-header-breakpoint: xl;
 }
 
 .wrmc-nav__link--sub {
-  padding-top: variables.$spacing-3 / 2;
-  padding-bottom: variables.$spacing-3 / 2;
+  padding-top: variables.$spacing-3 * 0.5;
+  padding-bottom: variables.$spacing-3 * 0.5;
   font-size: variables.$typescale-2;
 
   &:hover,
diff --git a/src/scss/components/_wrmc-top-thirty-songs.scss b/src/scss/components/_wrmc-top-thirty-songs.scss
index 3367e4d0..c789f139 100644
--- a/src/scss/components/_wrmc-top-thirty-songs.scss
+++ b/src/scss/components/_wrmc-top-thirty-songs.scss
@@ -57,7 +57,7 @@
     &:before{ 
       content: "";
       display: block;
-      padding-top: math.percentage(1/1);
+      padding-top: math.percentage(math.div(1, 1));
       background-color: variables.$wrmc-pink;
     }
 
diff --git a/src/scss/components/_wrmc-weekly-schedule.scss b/src/scss/components/_wrmc-weekly-schedule.scss
index b10b5434..600c65ea 100644
--- a/src/scss/components/_wrmc-weekly-schedule.scss
+++ b/src/scss/components/_wrmc-weekly-schedule.scss
@@ -7,7 +7,7 @@
   position: relative;
 
   .weekly-schedule__column {
-    width: math.percentage(1/7);
+    width: math.percentage(math.div(1, 7));
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/src/scss/core/_functions.scss b/src/scss/core/_functions.scss
index edd92729..96c5c07b 100644
--- a/src/scss/core/_functions.scss
+++ b/src/scss/core/_functions.scss
@@ -5,13 +5,15 @@
 ////
 /// Convert a number into an em unit given a base font size
 ////
+@use "sass:math";
+
 @function em($target, $base: 16) {
-  @return $target / $base * 1em;
+  @return math.div($target, $base) * 1em;
 }
 
 ////
 /// Convert a number into an rem unit given a base font size
 ////
 @function rem($target, $base: 16) {
-  @return $target / $base * 1rem;
+  @return math.div($target, $base) * 1rem;
 }
diff --git a/src/scss/mixins/_grid-framework.scss b/src/scss/mixins/_grid-framework.scss
index 7f5c3e21..f7ecc7d5 100644
--- a/src/scss/mixins/_grid-framework.scss
+++ b/src/scss/mixins/_grid-framework.scss
@@ -5,7 +5,7 @@
 // adapted from Bootstrap v4.1.1
 // https://github.com/twbs/bootstrap/blob/v4.1.1/scss/mixins/_grid-framework.scss
 
-@mixin make-grid-columns($columns: variables.$grid-columns, $breakpoints: $breakpoints) {
+@mixin make-grid-columns($columns: variables.$grid-columns, $breakpoints: variables.$breakpoints) {
   // use placeholders and extend so selectors are combined when css is generated
   %grid-column {
     @include grid.make-col-ready;
diff --git a/src/scss/mixins/_grid.scss b/src/scss/mixins/_grid.scss
index acb65e3b..d2ec6d2b 100644
--- a/src/scss/mixins/_grid.scss
+++ b/src/scss/mixins/_grid.scss
@@ -9,22 +9,22 @@
 // - https://github.com/primer/css/blob/v14.1.0/src/layout/grid.scss
 
 @mixin make-gutters() {
-  padding-right: (variables.$grid-gutter-width / 2);
-  padding-left: (variables.$grid-gutter-width / 2);
+  padding-right: (variables.$grid-gutter-width * 0.5);
+  padding-left: (variables.$grid-gutter-width * 0.5);
 
   @include breakpoints.breakpoint(lg) {
-    padding-right: (variables.$grid-gutter-width-lg / 2);
-    padding-left: (variables.$grid-gutter-width-lg / 2);
+    padding-right: (variables.$grid-gutter-width-lg * 0.5);
+    padding-left: (variables.$grid-gutter-width-lg * 0.5);
   }
 }
 
 @mixin make-row-gutters() {
-  margin-right: (variables.$grid-gutter-width / -2);
-  margin-left: (variables.$grid-gutter-width / -2);
+  margin-right: math.div(variables.$grid-gutter-width, -2);
+  margin-left: math.div(variables.$grid-gutter-width, -2);
 
   @include breakpoints.breakpoint(lg) {
-    margin-right: (variables.$grid-gutter-width-lg / -2);
-    margin-left: (variables.$grid-gutter-width-lg / -2);
+    margin-right: math.div(variables.$grid-gutter-width-lg, -2);
+    margin-left: math.div(variables.$grid-gutter-width-lg, -2);
   }
 }
 
@@ -56,14 +56,14 @@
 }
 
 @mixin make-col($size, $columns: variables.$grid-columns) {
-  flex: 0 0 math.percentage($size / $columns);
+  flex: 0 0 math.percentage(math.div($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: math.percentage($size / $columns);
+  max-width: math.percentage(math.div($size, $columns));
 }
 
 @mixin make-col-offset($size, $columns: variables.$grid-columns) {
-  $num: $size / $columns;
+  $num: math.div($size, $columns);
   margin-left: if($num == 0, 0, math.percentage($num));
 }
diff --git a/src/scss/scope/_typography.scss b/src/scss/scope/_typography.scss
index 082eef23..e65f7e9c 100644
--- a/src/scss/scope/_typography.scss
+++ b/src/scss/scope/_typography.scss
@@ -1,9 +1,10 @@
-@use "../components/terms";
 @use "../core/functions";
 @use "../core/mixins";
 @use "../core/variables";
 @use "../mixins/breakpoints";
 @use "../mixins/type";
+@use "../components/terms";
+@use "../components/table";
 
 .typography {
   > :first-child {
diff --git a/src/templates/partials/gallery-modal.twig b/src/templates/partials/gallery-modal.twig
index 965a63f4..457b9391 100644
--- a/src/templates/partials/gallery-modal.twig
+++ b/src/templates/partials/gallery-modal.twig
@@ -74,7 +74,7 @@
             src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{item.width}} {{item.height}}'/%3E"
             {# src="" #}
             data-src="{{item.src}}"
-            data-srcset="{% for scale in [1, 0.75, 0.5, 0.25] %}http://placekitten.com/{{(item.width * scale)|round}}/{{(item.height * scale)|round}} {{(item.width * scale)|round}}w{{not loop.last ? ', ' : ''}}{% endfor %}"
+            data-srcset="{% for scale in [1, 0.75, 0.5, 0.25] %}http://placecats.com/{{(item.width * scale)|round}}/{{(item.height * scale)|round}} {{(item.width * scale)|round}}w{{not loop.last ? ', ' : ''}}{% endfor %}"
             width="{{item.width}}"
             alt=""
           />
diff --git a/src/templates/partials/journey-modal-gallery.twig b/src/templates/partials/journey-modal-gallery.twig
index 33289499..216d6447 100644
--- a/src/templates/partials/journey-modal-gallery.twig
+++ b/src/templates/partials/journey-modal-gallery.twig
@@ -1,4 +1,4 @@
-{% set placehold = 'https://placekitten.com/' %}
+{% set placehold = 'https://placecats.com/' %}
 <div class="lightbox__images" aria-describedby="midd-video-label-{{id}}">
 
   {% for item in journey_gallery_data %}