From 8e92d0617e50ac36f6da7825b4d18c0d3df82ff1 Mon Sep 17 00:00:00 2001
From: Haley <haley@openfunctioncomputers.com>
Date: Thu, 9 Jan 2025 09:30:12 -0800
Subject: [PATCH] WIP

---
 .../acf-json/group_625dc5c18c6d5.json         | 27 ++---
 .../themes/medicalalert/dist/app.css          | 97 ++++++++++++++----
 .../medicalalert/dist/mix-manifest.json       |  2 +-
 .../themes/medicalalert/src/scss/global.scss  | 55 ++++++++++-
 .../themes/medicalalert/src/scss/hero.scss    | 34 +++++--
 .../medicalalert/src/scss/icon-info-grid.scss | 10 --
 .../medicalalert/src/scss/logo-grid.scss      | 10 +-
 .../medicalalert/src/scss/testimonial.scss    | 11 +--
 .../medicalalert/src/scss/video-copy.scss     |  6 +-
 .../tpl/color_header_card_grid.tpl            |  2 +-
 .../medicalalert/tpl/form_with_image.tpl      |  2 +-
 .../themes/medicalalert/tpl/hero.tpl          | 98 +++++++++----------
 .../medicalalert/tpl/icon_info_grid.tpl       | 10 +-
 .../medicalalert/tpl/icon_video_aside.tpl     |  2 +-
 .../themes/medicalalert/tpl/image_aside.tpl   | 25 +++--
 .../medicalalert/tpl/image_with_checklist.tpl | 58 +++++------
 .../tpl/image_with_icon_info_grid.tpl         | 11 +--
 .../themes/medicalalert/tpl/products_list.tpl |  4 +-
 .../themes/medicalalert/tpl/testimonial.tpl   | 14 +--
 19 files changed, 301 insertions(+), 177 deletions(-)

diff --git a/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json b/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
index d5ce65c3..8ce8df82 100644
--- a/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
+++ b/wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
@@ -1790,7 +1790,7 @@
                             "name": "align_icons",
                             "aria-label": "",
                             "type": "select",
-                            "instructions": "Select how many items per row for large screens.",
+                            "instructions": "Align Icon on top or to the left of text.",
                             "required": 0,
                             "conditional_logic": 0,
                             "wrapper": {
@@ -2060,7 +2060,7 @@
                         },
                         {
                             "key": "field_6269c7d16d612",
-                            "label": "Alignment",
+                            "label": "Alignment Image",
                             "name": "alignment",
                             "aria-label": "",
                             "type": "select",
@@ -2073,13 +2073,15 @@
                                 "id": ""
                             },
                             "choices": {
-                                "first": "first"
+                                "first": "Left",
+                                "last": "Right"
                             },
-                            "default_value": false,
-                            "allow_null": 0,
-                            "multiple": 0,
-                            "ui": 0,
+                            "default_value": "first",
                             "return_format": "value",
+                            "multiple": 0,
+                            "allow_null": 0,
+                            "allow_in_bindings": 1,
+                            "ui": 0,
                             "ajax": 0,
                             "placeholder": ""
                         },
@@ -6059,15 +6061,14 @@
                             },
                             "choices": {
                                 "white": "White",
-                                "pink": "Pink",
-                                "red": "Red",
                                 "light-blue": "Light Blue"
                             },
                             "default_value": "white",
-                            "allow_null": 0,
-                            "multiple": 0,
-                            "ui": 0,
                             "return_format": "value",
+                            "multiple": 0,
+                            "allow_null": 0,
+                            "allow_in_bindings": 1,
+                            "ui": 0,
                             "ajax": 0,
                             "placeholder": ""
                         },
@@ -8310,5 +8311,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1736379804
+    "modified": 1736391849
 }
diff --git a/wp/wp-content/themes/medicalalert/dist/app.css b/wp/wp-content/themes/medicalalert/dist/app.css
index 5d759667..6d2e9256 100644
--- a/wp/wp-content/themes/medicalalert/dist/app.css
+++ b/wp/wp-content/themes/medicalalert/dist/app.css
@@ -11696,10 +11696,40 @@ button[type=submit].single_add_to_cart_button,
 .bg-color-navy-sky {
   background: linear-gradient(90deg, #000066 0%, #3399ff 100%);
 }
+.bg-color-navy-sky h1, .bg-color-navy-sky .headline-largest, .bg-color-navy-sky .h1 {
+  color: white !important;
+}
+.bg-color-navy-sky h2, .bg-color-navy-sky .headline-large, .bg-color-navy-sky .h2 {
+  color: white !important;
+}
+.bg-color-navy-sky h3, .bg-color-navy-sky .headline-standard, .bg-color-navy-sky .h3 {
+  color: white !important;
+}
+.bg-color-navy-sky strong {
+  color: white !important;
+}
+.bg-color-navy-sky p {
+  color: white !important;
+}
 
-.g-sky-bright {
+.bg-color-sky-bright {
   background: linear-gradient(90deg, #3399ff 0%, rgba(51, 153, 255, 0.5) 100%);
 }
+.bg-color-sky-bright h1, .bg-color-sky-bright .headline-largest, .bg-color-sky-bright .h1 {
+  color: white !important;
+}
+.bg-color-sky-bright h2, .bg-color-sky-bright .headline-large, .bg-color-sky-bright .h2 {
+  color: white !important;
+}
+.bg-color-sky-bright h3, .bg-color-sky-bright .headline-standard, .bg-color-sky-bright .h3 {
+  color: white !important;
+}
+.bg-color-sky-bright strong {
+  color: white !important;
+}
+.bg-color-sky-bright p {
+  color: white !important;
+}
 
 .bg-color-gradient-light-blue {
   background: linear-gradient(90deg, rgba(51, 153, 255, 0.5) 0%, rgba(51, 153, 255, 0.1) 100%);
@@ -11746,6 +11776,16 @@ button[type=submit].single_add_to_cart_button,
 
 .bg-color-red-yellow {
   background: linear-gradient(90deg, #cc0133 0%, #ffb020 100%);
+  color: white;
+}
+.bg-color-red-yellow li {
+  color: white;
+}
+.bg-color-red-yellow p {
+  color: white;
+}
+.bg-color-red-yellow a {
+  color: white;
 }
 
 .g-sky-border {
@@ -12228,7 +12268,14 @@ h6, .h6 {
 }
 
 .tile-1-3-grid {
-  max-width: 250px;
+  max-width: 300px;
+  z-index: 1;
+}
+
+.tile-2 {
+  right: 2%;
+  bottom: -6%;
+  width: 160px;
 }
 
 .tile-square {
@@ -12240,11 +12287,21 @@ h6, .h6 {
 }
 
 .radial {
-  bottom: -65%;
-  right: 0%;
+  top: 600px;
+  right: -18%;
+  max-width: 450px;
+}
+
+body {
+  overflow-x: hidden;
 }
 
 @media (min-width: 768px) {
+  .radial {
+    top: 300px;
+    right: -4%;
+  }
+
   .pos {
     margin-bottom: -175px;
   }
@@ -12259,23 +12316,20 @@ h6, .h6 {
     width: 100%;
   }
 }
+@media (min-width: 992px) {
+  .radial {
+    top: 500px;
+    right: -4%;
+  }
+}
 .icon-info-grid-slice-container .icon-card-wrapper .icon-card {
   display: grid;
   grid-template-rows: 1fr auto 1fr;
   width: 100%;
-  position: relative;
 }
 .icon-info-grid-slice-container .icon-card-wrapper .icon-card .icon-img {
   max-width: 50px;
   height: 50px;
-  display: flex;
-  align-items: end;
-}
-.icon-info-grid-slice-container .icon-card-wrapper .icon-card .content-wrapper .icon-link {
-  position: absolute;
-  bottom: 0;
-  width: -moz-fit-content;
-  width: fit-content;
 }
 
 .consumer-brand .icon-info-grid-slice-container .icon-card .title {
@@ -12344,6 +12398,8 @@ h6, .h6 {
 
 .logo-grid-slice-container .logo img {
   width: 100%;
+  filter: grayscale(1);
+  opacity: 0.5;
 }
 
 .phone-contact-slice-container h3, .phone-contact-slice-container .headline-standard, .phone-contact-slice-container .h3 {
@@ -12453,17 +12509,19 @@ h6, .h6 {
   padding-bottom: 9rem;
 }
 @media (min-width: 992px) {
-  .testimonial-slice-container .g-sky-border {
-    margin-bottom: -73px;
+  .testimonial-slice-container .offset {
+    position: absolute;
+    left: 20px;
   }
 }
 .testimonial-slice-container .testimonial-img {
   width: 100%;
-  max-width: 300px;
-  max-height: 300px;
   -o-object-fit: cover;
      object-fit: cover;
 }
+.testimonial-slice-container .testimonial-inner-content-wrapper {
+  padding-left: 3em;
+}
 .testimonial-slice-container .testimonial-inner-content-wrapper .testimonial-title {
   font-size: 32px;
   font-weight: bold;
@@ -12511,7 +12569,10 @@ h6, .h6 {
 }
 .video-copy-slice-container .radial-center-graphic {
   top: 0;
-  left: 50%;
+  left: calc(50% - 500px);
+}
+.video-copy-slice-container .radial-center-graphic svg {
+  width: 1000px;
 }
 
 .video-grid-slice-container .heading {
diff --git a/wp/wp-content/themes/medicalalert/dist/mix-manifest.json b/wp/wp-content/themes/medicalalert/dist/mix-manifest.json
index cd9b465e..4fe900c3 100644
--- a/wp/wp-content/themes/medicalalert/dist/mix-manifest.json
+++ b/wp/wp-content/themes/medicalalert/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=def087bfee86b3ced20472c4fd21ee05",
-    "/app.css": "/app.css?id=4a9aeb5a5a22c11c195b2ce4905e2d50"
+    "/app.css": "/app.css?id=ce0cb2dfa7a09d1c721b431100aa8cfe"
 }
diff --git a/wp/wp-content/themes/medicalalert/src/scss/global.scss b/wp/wp-content/themes/medicalalert/src/scss/global.scss
index 2daf0e99..905bae1d 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/global.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/global.scss
@@ -560,10 +560,50 @@ button[type="submit"].single_add_to_cart_button,
 
 .bg-color-navy-sky {
     background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(51, 153, 255, 1) 100%);
+
+    h1 {
+        color: white !important;
+    }
+
+    h2 {
+        color: white !important;
+    }
+
+    h3 {
+        color: white !important;
+    }
+
+    strong {
+        color: white !important;
+    }
+
+    p {
+        color: white !important;
+    }
 }
 
-.g-sky-bright {
+.bg-color-sky-bright {
     background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(51, 153, 255, 0.5) 100%);
+
+    h1 {
+        color: white !important;
+    }
+
+    h2 {
+        color: white !important;
+    }
+
+    h3 {
+        color: white !important;
+    }
+
+    strong {
+        color: white !important;
+    }
+
+    p {
+        color: white !important;
+    }
 }
 
 .bg-color-gradient-light-blue {
@@ -619,6 +659,19 @@ button[type="submit"].single_add_to_cart_button,
 
 .bg-color-red-yellow {
     background: linear-gradient(90deg, rgba(204, 1, 51, 1)0%, rgba(255, 176, 32, 1) 100%);
+    color: white;
+
+    li {
+        color: white;
+    }
+
+    p {
+        color: white;
+    }
+
+    a {
+        color: white;
+    }
 }
 
 .g-sky-border {
diff --git a/wp/wp-content/themes/medicalalert/src/scss/hero.scss b/wp/wp-content/themes/medicalalert/src/scss/hero.scss
index 97144508..9e96fbdb 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/hero.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/hero.scss
@@ -30,14 +30,15 @@
 }
 
 .tile-1-3-grid {
-    max-width: 250px;
+    max-width: 300px;
+    z-index: 1;
 }
 
-// .tile-2 {
-//     right: 2%;
-//     bottom: -6%;
-//     width: 160px;
-// }
+.tile-2 {
+    right: 2%;
+    bottom: -6%;
+    width: 160px;
+}
 
 .tile-square {
     max-width: 250px;
@@ -48,12 +49,21 @@
 }
 
 .radial {
-    bottom: -65%;
-    right: 0%;
+    top: 600px;
+    right: -18%;
+    max-width: 450px;
+}
+
+body {
+    overflow-x: hidden;
 }
 
 @include media-breakpoint-up(md) {
 
+    .radial {
+        top: 300px;
+        right: -4%
+    }
 
     .pos {
         margin-bottom: -175px;
@@ -69,4 +79,12 @@
         width: 100%;
     }
 
+}
+
+@include media-breakpoint-up(lg) {
+
+    .radial {
+        top: 500px;
+        right: -4%
+    }
 }
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/src/scss/icon-info-grid.scss b/wp/wp-content/themes/medicalalert/src/scss/icon-info-grid.scss
index 6d03df87..ccc9be14 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/icon-info-grid.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/icon-info-grid.scss
@@ -4,22 +4,12 @@
             display: grid;
             grid-template-rows: 1fr auto 1fr;
             width: 100%;
-            position: relative;
 
             .icon-img {
                 max-width: 50px;
                 height: 50px;
-                display: flex;
-                align-items: end;
             }
 
-            .content-wrapper {
-                .icon-link {
-                    position: absolute;
-                    bottom: 0;
-                    width: fit-content;
-                }
-            }
         }
     }
 }
diff --git a/wp/wp-content/themes/medicalalert/src/scss/logo-grid.scss b/wp/wp-content/themes/medicalalert/src/scss/logo-grid.scss
index 67c0e6d6..0a1aeb4f 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/logo-grid.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/logo-grid.scss
@@ -1,7 +1,9 @@
 .logo-grid-slice-container {
-  .logo {
-    img {
-      width: 100%;
+    .logo {
+        img {
+            width: 100%;
+            filter: grayscale(1);
+            opacity: 0.5;
+        }
     }
-  }
 }
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss b/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
index bcbf04c3..7875e04d 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/testimonial.scss
@@ -2,21 +2,20 @@
     padding-bottom: 9rem;
 
     @include media-breakpoint-up(lg) {
-        .g-sky-border {
-            margin-bottom: -73px;
+        .offset {
+            position: absolute;
+            left: 20px;
         }
     }
 
-
     .testimonial-img {
         width: 100%;
-        max-width: 300px;
-        max-height: 300px;
         object-fit: cover;
-
     }
 
     .testimonial-inner-content-wrapper {
+        padding-left: 3em;
+
         .testimonial-title {
             font-size: 32px;
             font-weight: bold;
diff --git a/wp/wp-content/themes/medicalalert/src/scss/video-copy.scss b/wp/wp-content/themes/medicalalert/src/scss/video-copy.scss
index eb82b41b..b0ffb810 100644
--- a/wp/wp-content/themes/medicalalert/src/scss/video-copy.scss
+++ b/wp/wp-content/themes/medicalalert/src/scss/video-copy.scss
@@ -26,8 +26,12 @@
     }
 
     .radial-center-graphic {
+        svg {
+            width: 1000px;
+        }
+
         top: 0;
-        left: 50%;
+        left: calc(50% - 500px);
     }
 
 }
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/tpl/color_header_card_grid.tpl b/wp/wp-content/themes/medicalalert/tpl/color_header_card_grid.tpl
index dfd9f050..24737825 100644
--- a/wp/wp-content/themes/medicalalert/tpl/color_header_card_grid.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/color_header_card_grid.tpl
@@ -4,7 +4,7 @@
         <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 justify-content-evenly gx-2 gy-3">
             {{#each color_header_cards}}
             <div class="col">
-                <div class="color-header-card  header-color-{{../header_background_color}}">
+                <div class="color-header-card header-color-{{../header_background_color}}">
                     <div class="header p-3">
                         <h4>{{header}}</h4>
                     </div>
diff --git a/wp/wp-content/themes/medicalalert/tpl/form_with_image.tpl b/wp/wp-content/themes/medicalalert/tpl/form_with_image.tpl
index d70ff029..1bf14c88 100644
--- a/wp/wp-content/themes/medicalalert/tpl/form_with_image.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/form_with_image.tpl
@@ -2,7 +2,7 @@
 <section id="formAnchor" class="form-with-image-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="container py-5">
         <div class="row">
-            <div class="col-12 col-md-6 order-{{alignment}}">
+            <div class="col-12 col-md-6 order-{{alignment}} my-3">
                 <div class="g-purple-border m-auto">
                     <img class="w-100" src="{{image.url}}" alt="{{image.alt}}" />
                 </div>
diff --git a/wp/wp-content/themes/medicalalert/tpl/hero.tpl b/wp/wp-content/themes/medicalalert/tpl/hero.tpl
index 99c4e054..7a528e52 100644
--- a/wp/wp-content/themes/medicalalert/tpl/hero.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/hero.tpl
@@ -1,7 +1,7 @@
-<section class="hero-slice-container p-relative">
-    <div class="g-sky-hero p-relative overflow-hidden">
+<section class="hero-slice-container">
+    <div class="g-sky-hero">
         <div class="container hero-wrapper">
-            <div class="row h-100 pb-5 d-flex align-items-center">
+            <div class="row h-100 pb-5 p-relative d-flex align-items-center">
                 <div class="col-md-6 pt-5 d-flex flex-column justify-content-center h-100">
                     <h1 class="mb-2 hero-title">{{title}}</h1>
                     <p class="mb-4 hero-copy">{{copy}}</p>
@@ -12,25 +12,36 @@
                     {{/if}}
                 </div>
                 <div class="col-md-6">
-                    <div class="p-absolute radial">
-                        <svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <g clip-path="url(#clip0_252_440)">
-                                <path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
-                                <path opacity="0.66" d="M226.002 141.034C179.151 141.034 141.034 179.151 141.034 226.002C141.034 272.853 179.151 310.971 226.002 310.971C272.853 310.971 310.971 272.853 310.971 226.002C310.971 179.151 272.853 141.034 226.002 141.034ZM226.002 123.79C239.832 123.79 253.226 126.513 265.791 131.828C277.968 136.979 288.907 144.362 298.277 153.732C307.647 163.102 315.03 174.041 320.181 186.218C325.496 198.778 328.218 212.172 328.218 226.007C328.218 239.841 325.496 253.23 320.181 265.795C315.03 277.973 307.647 288.911 298.277 298.281C288.907 307.651 277.968 315.034 265.791 320.185C253.23 325.501 239.837 328.223 226.002 328.223C212.167 328.223 198.778 325.501 186.214 320.185C174.036 315.034 163.098 307.651 153.728 298.281C144.357 288.911 136.975 277.973 131.824 265.795C126.508 253.235 123.786 239.841 123.786 226.007C123.786 212.172 126.508 198.783 131.824 186.218C136.975 174.041 144.357 163.102 153.728 153.732C163.098 144.362 174.036 136.979 186.214 131.828C198.774 126.513 212.167 123.79 226.002 123.79Z" fill="white" fill-opacity="0.3" />
-                                <path opacity="0.49" d="M226.002 99.7701C156.397 99.7701 99.7702 156.397 99.7702 226.002C99.7702 295.608 156.397 352.234 226.002 352.234C295.608 352.234 352.234 295.608 352.234 226.002C352.234 156.397 295.608 99.7701 226.002 99.7701ZM226.002 82.5269C245.393 82.5269 264.187 86.332 281.849 93.8085C298.936 101.036 314.286 111.39 327.448 124.557C340.61 137.719 350.964 153.068 358.196 170.156C365.668 187.818 369.473 206.611 369.473 226.002C369.473 245.393 365.668 264.187 358.196 281.849C350.969 298.936 340.614 314.286 327.448 327.448C314.286 340.61 298.936 350.964 281.849 358.196C264.187 365.668 245.389 369.478 226.002 369.478C206.616 369.478 187.818 365.672 170.156 358.196C153.068 350.969 137.719 340.614 124.557 327.448C111.395 314.286 101.04 298.936 93.8085 281.849C86.3365 264.187 82.5314 245.393 82.5314 226.002C82.5314 206.611 86.3365 187.818 93.8085 170.156C101.036 153.068 111.39 137.719 124.557 124.557C137.719 111.395 153.068 101.04 170.156 93.8085C187.818 86.3365 206.616 82.5314 226.002 82.5314V82.5269Z" fill="white" fill-opacity="0.3" />
-                                <path opacity="0.32" d="M226.002 58.5067C133.646 58.5067 58.5067 133.646 58.5067 226.002C58.5067 318.358 133.646 393.498 226.002 393.498C318.358 393.498 393.498 318.358 393.498 226.002C393.498 133.646 318.358 58.5067 226.002 58.5067ZM226.002 41.2635C250.949 41.2635 275.148 46.1557 297.911 55.7843C319.913 65.0921 339.669 78.4144 356.628 95.3725C373.586 112.331 386.908 132.091 396.216 154.089C405.844 176.852 410.737 201.051 410.737 225.998C410.737 250.945 405.844 275.143 396.216 297.907C386.908 319.909 373.586 339.665 356.628 356.623C339.669 373.581 319.909 386.903 297.911 396.211C275.148 405.84 250.949 410.732 226.002 410.732C201.055 410.732 176.857 405.84 154.093 396.211C132.091 386.903 112.335 373.581 95.3769 356.623C78.4189 339.665 65.0966 319.904 55.7888 297.907C46.1602 275.143 41.2679 250.945 41.2679 225.998C41.2679 201.051 46.1602 176.852 55.7888 154.089C65.0966 132.087 78.4189 112.331 95.3769 95.3725C112.335 78.4144 132.096 65.0921 154.093 55.7843C176.857 46.1557 201.055 41.2635 226.002 41.2635Z" fill="white" fill-opacity="0.3" />
-                                <path opacity="0.15" d="M226.002 17.2432C110.891 17.2432 17.2432 110.891 17.2432 226.002C17.2432 341.113 110.891 434.761 226.002 434.761C341.113 434.761 434.761 341.113 434.761 226.002C434.761 110.891 341.109 17.2432 226.002 17.2432ZM226.002 452C195.495 452 165.896 446.025 138.031 434.235C111.119 422.851 86.9469 406.557 66.1971 385.807C45.4428 365.053 29.1486 340.886 17.769 313.974C5.97498 286.104 0 256.505 0 226.002C0 195.499 5.97498 165.896 17.7645 138.031C29.1486 111.119 45.4428 86.9469 66.1926 66.1971C86.9469 45.4428 111.114 29.1486 138.026 17.769C165.896 5.97498 195.495 0 226.002 0C256.51 0 286.108 5.97498 313.974 17.7645C340.886 29.1486 365.058 45.4428 385.807 66.1926C406.562 86.9469 422.856 111.114 434.235 138.026C446.021 165.896 452 195.49 452 225.998C452 256.505 446.025 286.104 434.235 313.969C422.851 340.881 406.557 365.053 385.807 385.803C365.053 406.557 340.886 422.851 313.974 434.231C286.104 446.016 256.51 451.996 226.002 451.996V452Z" fill="white" fill-opacity="0.3" />
-                            </g>
-                            <defs>
-                                <clipPath id="clip0_252_440">
-                                    <rect width="452" height="452" fill="white" />
-                                </clipPath>
-                            </defs>
-                        </svg>
-                    </div>
                     <div class="d-flex align-items-center justify-content-center">
-                        {{#if !tile_image_3}}
-                        {{#if !tile_image_2}}
+                        {{#if tile_image_3}}
+                        <div class="pt-md-5 mt-md-5">
+                            <div class="g-sky-border mt-5 me-3 tile-1-3-grid p-relative z-0">
+                                <img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
+                            </div>
+                        </div>
+                        <div>
+                            <div class="pos z-1 p-relative">
+                                <div class="g-sky-border mb-3">
+                                    <img class="w-100 tile-square" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
+                                </div>
+                                <div class="g-sky-border">
+                                    <img class="w-100 tile-square" src="{{tile_image_3.url}}" alt="{{tile_image_3.alt}}" />
+                                </div>
+                            </div>
+                        </div>
+                        {{else}}
+                        {{#if tile_image_2}}
+                        <div class="pt-md-5 mt-md-5">
+                            <div class="g-sky-border mt-5 me-3 tile-1 p-relative z-0">
+                                <img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
+                            </div>
+                        </div>
+                        <div class="p-absolute tile-square tile-2">
+                            <div class="g-sky-border">
+                                <img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
+                            </div>
+                        </div>
+                        {{else}}
                         {{#if tile_image_1}}
                         <div class="g-sky-border mt-5 tile-1 p-relative z-0 ms-auto">
                             <img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
@@ -43,36 +54,21 @@
             </div>
         </div>
     </div>
-    {{#if tile_image_3}}
-    <div class="row p-absolute w-100">
-        <div class="col-md-6 offset-md-6">
-            <div class="d-flex justify-content-center w-100">
-                {{#if tile_image_1}}
-                <div class="me-3">
-                    <div class="g-sky-border mt-5 tile-1-3-grid">
-                        <img class="w-100" src="{{tile_image_1.url}}" alt="{{tile_image_1.alt}}" />
-                    </div>
-                </div>
-                {{/if}}
-                <div>
-                    {{#if tile_image_2}}
-                    <div class="tile-square mb-3">
-                        <div class="g-sky-border">
-                            <img class="w-100" src="{{tile_image_2.url}}" alt="{{tile_image_2.alt}}" />
-                        </div>
-                    </div>
-                    {{/if}}
 
-                    <div class="tile-square">
-                        <div class="g-sky-border">
-                            <img class="w-100" src="{{tile_image_3.url}}" alt="{{tile_image_3.alt}}" />
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
+    <div class="p-absolute radial w-100">
+        <svg width="452" height="452" viewBox="0 0 452 452" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_252_440)">
+                <path opacity="0.83" d="M226.002 165.049C234.276 165.049 242.27 166.689 249.728 169.844C256.991 172.918 263.523 177.329 269.097 182.907C274.671 188.481 279.082 195.009 282.161 202.276C285.32 209.735 286.955 217.728 286.955 226.002C286.955 234.276 285.315 242.27 282.161 249.728C279.086 256.991 274.675 263.523 269.097 269.097C263.523 274.671 256.991 279.082 249.728 282.161C242.27 285.32 234.276 286.955 226.002 286.955C217.728 286.955 209.735 285.315 202.276 282.161C195.013 279.086 188.482 274.675 182.908 269.097C177.334 263.523 172.923 256.995 169.844 249.728C166.685 242.27 165.049 234.276 165.049 226.002C165.049 217.728 166.689 209.735 169.844 202.276C172.918 195.013 177.329 188.481 182.908 182.907C188.482 177.334 195.013 172.922 202.276 169.844C209.735 166.685 217.728 165.049 226.002 165.049Z" fill="white" fill-opacity="0.3" />
+                <path opacity="0.66" d="M226.002 141.034C179.151 141.034 141.034 179.151 141.034 226.002C141.034 272.853 179.151 310.971 226.002 310.971C272.853 310.971 310.971 272.853 310.971 226.002C310.971 179.151 272.853 141.034 226.002 141.034ZM226.002 123.79C239.832 123.79 253.226 126.513 265.791 131.828C277.968 136.979 288.907 144.362 298.277 153.732C307.647 163.102 315.03 174.041 320.181 186.218C325.496 198.778 328.218 212.172 328.218 226.007C328.218 239.841 325.496 253.23 320.181 265.795C315.03 277.973 307.647 288.911 298.277 298.281C288.907 307.651 277.968 315.034 265.791 320.185C253.23 325.501 239.837 328.223 226.002 328.223C212.167 328.223 198.778 325.501 186.214 320.185C174.036 315.034 163.098 307.651 153.728 298.281C144.357 288.911 136.975 277.973 131.824 265.795C126.508 253.235 123.786 239.841 123.786 226.007C123.786 212.172 126.508 198.783 131.824 186.218C136.975 174.041 144.357 163.102 153.728 153.732C163.098 144.362 174.036 136.979 186.214 131.828C198.774 126.513 212.167 123.79 226.002 123.79Z" fill="white" fill-opacity="0.3" />
+                <path opacity="0.49" d="M226.002 99.7701C156.397 99.7701 99.7702 156.397 99.7702 226.002C99.7702 295.608 156.397 352.234 226.002 352.234C295.608 352.234 352.234 295.608 352.234 226.002C352.234 156.397 295.608 99.7701 226.002 99.7701ZM226.002 82.5269C245.393 82.5269 264.187 86.332 281.849 93.8085C298.936 101.036 314.286 111.39 327.448 124.557C340.61 137.719 350.964 153.068 358.196 170.156C365.668 187.818 369.473 206.611 369.473 226.002C369.473 245.393 365.668 264.187 358.196 281.849C350.969 298.936 340.614 314.286 327.448 327.448C314.286 340.61 298.936 350.964 281.849 358.196C264.187 365.668 245.389 369.478 226.002 369.478C206.616 369.478 187.818 365.672 170.156 358.196C153.068 350.969 137.719 340.614 124.557 327.448C111.395 314.286 101.04 298.936 93.8085 281.849C86.3365 264.187 82.5314 245.393 82.5314 226.002C82.5314 206.611 86.3365 187.818 93.8085 170.156C101.036 153.068 111.39 137.719 124.557 124.557C137.719 111.395 153.068 101.04 170.156 93.8085C187.818 86.3365 206.616 82.5314 226.002 82.5314V82.5269Z" fill="white" fill-opacity="0.3" />
+                <path opacity="0.32" d="M226.002 58.5067C133.646 58.5067 58.5067 133.646 58.5067 226.002C58.5067 318.358 133.646 393.498 226.002 393.498C318.358 393.498 393.498 318.358 393.498 226.002C393.498 133.646 318.358 58.5067 226.002 58.5067ZM226.002 41.2635C250.949 41.2635 275.148 46.1557 297.911 55.7843C319.913 65.0921 339.669 78.4144 356.628 95.3725C373.586 112.331 386.908 132.091 396.216 154.089C405.844 176.852 410.737 201.051 410.737 225.998C410.737 250.945 405.844 275.143 396.216 297.907C386.908 319.909 373.586 339.665 356.628 356.623C339.669 373.581 319.909 386.903 297.911 396.211C275.148 405.84 250.949 410.732 226.002 410.732C201.055 410.732 176.857 405.84 154.093 396.211C132.091 386.903 112.335 373.581 95.3769 356.623C78.4189 339.665 65.0966 319.904 55.7888 297.907C46.1602 275.143 41.2679 250.945 41.2679 225.998C41.2679 201.051 46.1602 176.852 55.7888 154.089C65.0966 132.087 78.4189 112.331 95.3769 95.3725C112.335 78.4144 132.096 65.0921 154.093 55.7843C176.857 46.1557 201.055 41.2635 226.002 41.2635Z" fill="white" fill-opacity="0.3" />
+                <path opacity="0.15" d="M226.002 17.2432C110.891 17.2432 17.2432 110.891 17.2432 226.002C17.2432 341.113 110.891 434.761 226.002 434.761C341.113 434.761 434.761 341.113 434.761 226.002C434.761 110.891 341.109 17.2432 226.002 17.2432ZM226.002 452C195.495 452 165.896 446.025 138.031 434.235C111.119 422.851 86.9469 406.557 66.1971 385.807C45.4428 365.053 29.1486 340.886 17.769 313.974C5.97498 286.104 0 256.505 0 226.002C0 195.499 5.97498 165.896 17.7645 138.031C29.1486 111.119 45.4428 86.9469 66.1926 66.1971C86.9469 45.4428 111.114 29.1486 138.026 17.769C165.896 5.97498 195.495 0 226.002 0C256.51 0 286.108 5.97498 313.974 17.7645C340.886 29.1486 365.058 45.4428 385.807 66.1926C406.562 86.9469 422.856 111.114 434.235 138.026C446.021 165.896 452 195.49 452 225.998C452 256.505 446.025 286.104 434.235 313.969C422.851 340.881 406.557 365.053 385.807 385.803C365.053 406.557 340.886 422.851 313.974 434.231C286.104 446.016 256.51 451.996 226.002 451.996V452Z" fill="white" fill-opacity="0.3" />
+            </g>
+            <defs>
+                <clipPath id="clip0_252_440">
+                    <rect width="452" height="452" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
     </div>
-
-    {{/if}}
 </section>
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/tpl/icon_info_grid.tpl b/wp/wp-content/themes/medicalalert/tpl/icon_info_grid.tpl
index 7006faac..d4bca30d 100644
--- a/wp/wp-content/themes/medicalalert/tpl/icon_info_grid.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/icon_info_grid.tpl
@@ -4,8 +4,8 @@
         <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-{{number_of_columns}} d-flex justify-content-center gx-5 gy-5">
             {{#each icon_cards}}
             <div class="col icon-card-wrapper">
-                <div class="icon-card">
-                    <div class="icon-img">
+                <div class="icon-card d-flex {{../align_icons}}">
+                    <div class="icon-img mt-2 me-3">
                         <img class="img-fluid" src="{{icon.url}}" alt="{{icon.alt}}" />
                     </div>
                     <div class="content-wrapper">
@@ -14,8 +14,10 @@
                             {{{copy}}}
                         </div>
                         {{#if link}}
-                        <div class="icon-link">
-                            <a href="{{link.url}}" class="text-nowrap button--primary">{{link.title}}</a>
+                        <div>
+                            <div class="icon-link">
+                                <a href="{{link.url}}" class="text-nowrap button--primary">{{link.title}}</a>
+                            </div>
                         </div>
                         {{/if}}
                     </div>
diff --git a/wp/wp-content/themes/medicalalert/tpl/icon_video_aside.tpl b/wp/wp-content/themes/medicalalert/tpl/icon_video_aside.tpl
index 5de55d8d..8644f9a8 100644
--- a/wp/wp-content/themes/medicalalert/tpl/icon_video_aside.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/icon_video_aside.tpl
@@ -28,7 +28,7 @@
                     {{/each}}
                 </div>
             </div>
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-md-6 mt-4">
                 <div class="video">
                     <div class="ratio ratio-16x9">
                         <iframe src="https://player.vimeo.com/video/{{video}}" allowfullscreen></iframe>
diff --git a/wp/wp-content/themes/medicalalert/tpl/image_aside.tpl b/wp/wp-content/themes/medicalalert/tpl/image_aside.tpl
index 1882ec9b..43308ed8 100644
--- a/wp/wp-content/themes/medicalalert/tpl/image_aside.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/image_aside.tpl
@@ -1,19 +1,18 @@
 <!-- Image Aside BEGIN -->
 <section class="image-aside-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="container">
-      <div class="row row-cols-2 gx-4">
-        <div class="col-12 col-md-6 my-auto order-lg-{{alignment}}">
-          <div class="image-aside-copy">
-            {{{copy}}}
-          </div>
+        <div class="row row-cols-2 gx-4">
+            <div class="col-12 col-md-6 my-auto py-3 order-lg-{{alignment}}">
+                <div class="g-sky-border">
+                    <img class="img-fluid image-aside-img" src="{{image.url}}" alt="{{image.alt}}">
+                </div>
+            </div>
+            <div class="col-12 col-md-6 my-auto py-3">
+                <div class="image-aside-copy">
+                    {{{copy}}}
+                </div>
+            </div>
         </div>
-        <div class="col-12 col-md-6 order-lg-2">
-          <div class="image-aside-img-wrapper">
-            <img class="img-fluid image-aside-img" src="{{image.url}}" alt="{{image.alt}}">
-          </div>
-        </div>
-      </div>
     </div>
 </section>
-<!-- Image Aside END -->
-
+<!-- Image Aside END -->
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/tpl/image_with_checklist.tpl b/wp/wp-content/themes/medicalalert/tpl/image_with_checklist.tpl
index ec42914a..ef1f0b09 100644
--- a/wp/wp-content/themes/medicalalert/tpl/image_with_checklist.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/image_with_checklist.tpl
@@ -1,37 +1,37 @@
 <!-- Image with Checklist BEGIN -->
 <section class="image-with-checklist-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
-  <div class="container-fluid image-with-checklist-wrapper">
-    <div class="container">
-      <div class="row justify-content-center align-items-center gx-5">
-        <div class="col-auto mb-4">
-          <img class="img-fluid image-with-checklist-img" src="{{image.url}}" alt="{{image.alt}}" />
-        </div>
-        <div class="col-auto col-lg-6 my-auto">
-          <div class="image-with-checklist-copy">{{{copy}}}</div>
-          <div class="mt-4 mb-4 image-with-checklist-list">
-            {{#each checklist_items}}
-            <div class="row mt-3 mb-3">
-              <div class="col-1">
-                <div class="check">
-                  <img src="/wp-content/themes/medicalalert/assets/media/images/medicalalert__custom-list-image.png" alt="Checkmark">
+    <div class="container-fluid image-with-checklist-wrapper">
+        <div class="container">
+            <div class="row justify-content-center align-items-center">
+                <div class="col-auto p-3">
+                    <img class="img-fluid g-sky-border" src="{{image.url}}" alt="{{image.alt}}" />
                 </div>
-              </div>
-              <div class="col-11">
-                <div class="checklist-item">
-                  <p>{{checklist_item}}</p>
+                <div class="col-auto col-lg-6 my-auto p-3">
+                    <div class="image-with-checklist-copy">{{{copy}}}</div>
+                    <div class="image-with-checklist-list">
+                        {{#each checklist_items}}
+                        <div class="row mb-2">
+                            <div class="d-flex">
+                                <div class="check me-2 mt-1">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="#5BB25D" class="bi bi-check-lg" viewBox="0 0 16 16">
+                                        <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z" />
+                                    </svg>
+                                </div>
+                                <div class="checklist-item">
+                                    <p class="m-0">{{checklist_item}}</p>
+                                </div>
+                            </div>
+                        </div>
+                        {{/each}}
+                    </div>
+                    {{#if link}}
+                    <div class="link mt-4">
+                        <a class="button--primary" href="{{link.url}}">{{link.title}}</a>
+                    </div>
+                    {{/if}}
                 </div>
-              </div>
             </div>
-            {{/each}}
-          </div>
-          {{#if link}}
-            <div class="link mb-5">
-              <a class="button--primary" href="{{link.url}}">{{link.title}}</a>
-            </div>
-          {{/if}}
         </div>
-      </div>
     </div>
-  </div>
 </section>
-<!-- Image with Checklist END -->
+<!-- Image with Checklist END -->
\ No newline at end of file
diff --git a/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl b/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
index fac7889d..a699937f 100644
--- a/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/image_with_icon_info_grid.tpl
@@ -1,16 +1,15 @@
 <!-- Image With Icon Info Grid BEGIN -->
 <section class="image-with-icon-info-grid-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="container">
-
         <div class="row gx-3">
-            <div class="col-12 col-md col-lg-3 order-{{alignment}} align-self-center">
-                <div class="image">
-                    <img src="{{image.url}}" alt="{{image.alt}}">
+            <div class="col-12 col-md col-lg-4 order-md-{{alignment}} align-self-center py-3">
+                <div class="g-purple-border">
+                    <img class="w-100" src="{{image.url}}" alt="{{image.alt}}">
                 </div>
             </div>
-            <div class="col-12 col-md col-lg-9 order-2 my-auto">
+            <div class="col-12 col-md col-lg-8 my-auto py-3">
                 <div class="icon-info-grid">
-                    <div class="row row-cols-lg-2 gx-3 gy-5">
+                    <div class="row row-cols-lg-2 gx-3 gy-3">
                         {{#each icon_info_cards}}
                         <div class="col-12">
                             <div class="row">
diff --git a/wp/wp-content/themes/medicalalert/tpl/products_list.tpl b/wp/wp-content/themes/medicalalert/tpl/products_list.tpl
index 6b21e335..63ac32b8 100644
--- a/wp/wp-content/themes/medicalalert/tpl/products_list.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/products_list.tpl
@@ -1,7 +1,7 @@
 <!-- Products List BEGIN -->
 <section class="products-list-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="container">
-        <div class="row">
+        <div class="row gx-2">
             {{#each products}}
             <div class="col-12 col-lg-4 mb-2">
                 <div class="products-list-item h-100">
@@ -12,7 +12,7 @@
                             </div>
                             <div class="products-list-item-inner-wrapper align-self-stretch">
                                 <div class="line-sm pt-1"></div>
-                                <h3 class="products-list-title mb-3 pt-4">{{title}}</h3>
+                                <h3 class="products-list-title mb-3 pt-4 fw-bold">{{title}}</h3>
                                 <div class="products-list-copy pb-2">
                                     <p>{{{copy}}}</p>
                                 </div>
diff --git a/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl b/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
index 00e591f2..ec4192d2 100644
--- a/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
+++ b/wp/wp-content/themes/medicalalert/tpl/testimonial.tpl
@@ -1,5 +1,5 @@
 <!-- Testimonial BEGIN -->
-<section class="testimonial-slice-container p-relative mx-xs-2 mx-md-0 overflow-hidden">
+<section class="testimonial-slice-container mx-xs-2 mx-md-0 overflow-hidden p-relative padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
     <div class="p-absolute radial">
         <svg class="w-100" width="614" height="1023" viewBox="0 0 614 1023" fill="none" xmlns="http://www.w3.org/2000/svg">
             <g opacity="0.4" clip-path="url(#clip0_252_476)">
@@ -46,19 +46,19 @@
             </defs>
         </svg>
     </div>
-    <div class="container rounded   bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
-        <div class="row">
-            <div class="col-lg-4 d-flex justify-content-center mb-4">
-                <div class="g-sky-border z-0">
+    <div class="container rounded p-4 bg-color-{{background_color}}">
+        <div class="row gx-5">
+            <div class="col-lg-5 p-relative d-flex justify-content-center mb-4">
+                <div class="g-sky-border z-0 offset">
                     <img class="testimonial-img" src="{{image.url}}" alt="{{image.alt}}" />
                 </div>
             </div>
-            <div class="col-lg-8 my-auto testimonial-inner-content-wrapper">
+            <div class="col-lg-7 my-auto testimonial-inner-content-wrapper">
                 <svg width="35" height="29" viewBox="0 0 35 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M19.93 28.57V18.49C19.93 13.99 21.16 10.06 23.62 6.7C26.08 3.28 29.86 1.18 34.96 0.399999V6.97C32.02 7.33 30.07 8.29 29.11 9.85C28.15 11.41 27.67 13.48 27.67 16.06L22.36 14.98H34.78V28.57H19.93ZM0.4 28.57V18.49C0.4 13.99 1.63 10.06 4.09 6.7C6.55 3.28 10.33 1.18 15.43 0.399999V6.97C12.49 7.33 10.54 8.29 9.58 9.85C8.62 11.41 8.14 13.48 8.14 16.06L2.83 14.98H15.25V28.57H0.4Z" fill="white" />
                 </svg>
 
-                <h3 class="fw-bold f-navy mb-2">{{header}}</h3>
+                <h3 class="fw-bold f-navy mb-2 mt-1">{{header}}</h3>
                 <div class="f-black">{{{copy}}}</div>
                 <p class="f-black mt-4">
                     {{quote_attribution}}