diff --git a/assets/javascripts/new-javascripts/hero.js b/assets/javascripts/new-javascripts/hero.js
index 913a35b50..d37274520 100644
--- a/assets/javascripts/new-javascripts/hero.js
+++ b/assets/javascripts/new-javascripts/hero.js
@@ -1,5 +1,7 @@
 const heroAnimation = async () => {
-  const isReduceMotionEnabled = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const isReduceMotionEnabled = window.matchMedia(
+    '(prefers-reduced-motion: reduce)',
+  ).matches
   const urlParams = new URLSearchParams(location.search)
   const hasDebugParam = urlParams.has('debug')
 
@@ -118,7 +120,12 @@ const heroAnimation = async () => {
     return { ctx, pathInstance }
   }
 
-  const initLogo = ({ canvas, image, positionStart: [posX, posY], positionEnd: [endX, endY] }) => {
+  const initLogo = ({
+    canvas,
+    image,
+    positionStart: [posX, posY],
+    positionEnd: [endX, endY],
+  }) => {
     const ctx = canvas.getContext('2d')
     // Same reason for conversion as initSwoops
     ctx.translate(posX - image.naturalWidth / 2, posY - image.naturalHeight / 2)
@@ -128,9 +135,9 @@ const heroAnimation = async () => {
       ctx.drawImage(image, 0, 0)
     } else {
       ctx.globalAlpha = 1
-      const deltaX = endX - posX;
-      const deltaY = endY - posY;
-      ctx.drawImage(image, deltaX, deltaY);
+      const deltaX = endX - posX
+      const deltaY = endY - posY
+      ctx.drawImage(image, deltaX, deltaY)
     }
 
     return ctx
@@ -147,11 +154,11 @@ const heroAnimation = async () => {
     logo.image = logoImage
     // init canvas for each swoop layer
     heroSwoops.forEach((swoop, i) => {
-      swoop.image = swoopImages[i];
-      const canvasData = initSwoops(swoop);
-      swoop.ctx = canvasData.ctx;
-      swoop.pathInstance = canvasData.pathInstance;
-    });
+      swoop.image = swoopImages[i]
+      const canvasData = initSwoops(swoop)
+      swoop.ctx = canvasData.ctx
+      swoop.pathInstance = canvasData.pathInstance
+    })
     // init logo canvas
     logo.ctx = initLogo(logo)
   } catch (error) {
@@ -160,7 +167,7 @@ const heroAnimation = async () => {
   }
 
   if (isReduceMotionEnabled) {
-    return;
+    return
   }
 
   const DURATION = 1000
@@ -271,7 +278,7 @@ const heroAnimation = async () => {
     logo.state,
     {
       ease: 'out(1.1)',
-      duration: 250,
+      duration: 200,
       delay: 750,
       progress: 1,
       // ease: 'inOutQuad',
diff --git a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss
index 7c7f376f2..a199674f4 100644
--- a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss
+++ b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss
@@ -12,11 +12,12 @@
 }
 
 footer.global-footer {
-  background-color: #1E162E;
+  background-color: #1e162e;
   padding: 20px;
   text-align: center;
   padding: 6rem 3rem 3rem 3.5em;
   color: rgb(235, 236, 240);
+  position: relative;
   z-index: 10;
 
   .container {
@@ -31,23 +32,23 @@ footer.global-footer {
     margin-bottom: 5em;
 
     .logo {
-        display: flex;
-        height: 36px;
-        margin-bottom: 15px;
+      display: flex;
+      height: 36px;
+      margin-bottom: 15px;
 
-        svg {
-          height: 100%;
-        }
+      svg {
+        height: 100%;
+      }
 
-        #logotype {
-          fill: #ebecf0;
-        }
+      #logotype {
+        fill: #ebecf0;
+      }
     }
 
     h3 {
       height: 36px;
       margin-bottom: 15px;
-      color: #FCA76C;
+      color: #fca76c;
       font-size: 1.17em;
       line-height: 1.2;
       font-weight: bold;
@@ -130,7 +131,7 @@ footer.global-footer {
         }
 
         input:checked + .color-scheme-toggle-label {
-          background: #FCA76C;
+          background: #fca76c;
           color: #1e162e;
         }
       }
@@ -144,20 +145,19 @@ footer.global-footer {
     align-items: flex-end;
     color: #d1d2d4;
 
-
     nav {
       display: inline-block;
 
-        ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          display: inline-flex;
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: inline-flex;
 
-          a {
-            color: #d1d2d4;
-          }
+        a {
+          color: #d1d2d4;
         }
+      }
     }
 
     .legals {
@@ -168,7 +168,9 @@ footer.global-footer {
         margin-bottom: 1.5em;
         line-height: 1.5em;
 
-        p { margin: 0; }
+        p {
+          margin: 0;
+        }
 
         a {
           color: #d1d2d4;
@@ -180,7 +182,7 @@ footer.global-footer {
           margin-right: 1.75em;
 
           a {
-            padding: .35em 0;
+            padding: 0.35em 0;
             border-bottom: 1px solid transparent;
 
             &:hover {
@@ -205,19 +207,19 @@ footer.global-footer {
           &.github {
             @include icon-style($icon-github);
           }
-  
+
           &.bluesky {
             @include icon-style($icon-bluesky);
           }
-  
+
           &.feed {
             @include icon-style($icon-feed);
           }
-  
+
           &.mastodon {
             @include icon-style($icon-mastodon);
           }
-  
+
           &.x {
             @include icon-style($icon-x);
           }
@@ -225,4 +227,4 @@ footer.global-footer {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/new-stylesheets/pages/_get-started.scss b/assets/stylesheets/new-stylesheets/pages/_get-started.scss
index bbda08bf4..ef30a8540 100644
--- a/assets/stylesheets/new-stylesheets/pages/_get-started.scss
+++ b/assets/stylesheets/new-stylesheets/pages/_get-started.scss
@@ -49,6 +49,11 @@
       margin-bottom: 20px;
       position: relative;
       z-index: 1;
+
+      @media only screen and (max-width: 768px) {
+        font-size: 32px;
+        line-height: 1.33;
+      }
     }
 
     > p {
@@ -71,7 +76,7 @@
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
 
-      @media only screen and (max-width: 767px) {
+      @media only screen and (max-width: 768px) {
         & {
           grid-template-columns: 1fr;
         }
@@ -134,8 +139,8 @@
   margin-bottom: 50px;
 
   .content {
+    padding: 30px 50px 20px;
     background-color: var(--get-started-card-primary-bg);
-    padding: 53px 50px 40px;
     max-width: 980px;
     margin: 0 auto;
     z-index: 3;
@@ -148,6 +153,10 @@
       margin: 0 10px;
     }
 
+    @media only screen and (max-width: 768px) {
+      padding: 22px 15px 10px;
+    }
+
     .section-icon {
       width: 60px;
       margin: 40px 0 0;
@@ -158,10 +167,20 @@
       font-size: 48px;
       margin-bottom: 52px;
       color: var(--site-text-color);
+
+      @media only screen and (max-width: 768px) {
+        font-size: 32px;
+        line-height: 1.33;
+        margin-bottom: 22px;
+      }
     }
 
     a {
       @include link-with-right-arrow();
+
+      @media only screen and (max-width: 768px) {
+        padding-bottom: 15px;
+      }
     }
 
     .primary-cards,
@@ -284,7 +303,8 @@
 
           .name {
             margin-bottom: 6px;
-            font-size: 21px;
+            font-size: 22px;
+            line-height: 1.33;
           }
 
           .text {
@@ -311,6 +331,11 @@
     margin-bottom: 44px;
     width: 100%;
     text-align: center;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   .card-wrapper {
@@ -352,7 +377,6 @@
 
     p {
       margin-bottom: 25px;
-      padding-right: 90px;
     }
 
     a {
@@ -451,12 +475,22 @@
       font-size: 22px;
       line-height: 1.2;
       margin-bottom: 5px;
+
+      @media only screen and (max-width: 768px) {
+        font-size: 32px;
+        line-height: 1.33;
+      }
     }
   }
 
   h2 {
     font-size: 48px;
     margin-bottom: 27px;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p,
@@ -528,12 +562,21 @@
     font-size: 48px;
     font-weight: 600;
     margin-bottom: 29px;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
     font-size: 17px;
     padding: 0 100px;
-    margin-bottom: 26px;
+    margin-bottom: 45px;
+
+    @media only screen and (max-width: 768px) {
+      padding: 0;
+    }
   }
 
   a {
@@ -560,6 +603,11 @@
     font-size: 48px;
     margin-bottom: 30px;
     line-height: 1.2;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
@@ -614,6 +662,11 @@
     font-size: 48px;
     margin-bottom: 30px;
     line-height: 1.2;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
@@ -640,6 +693,11 @@
     margin-bottom: 44px;
     width: 100%;
     text-align: center;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   .card-wrapper {
@@ -725,6 +783,11 @@
   h2 {
     font-size: 48px;
     margin-bottom: 30px;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
@@ -817,6 +880,11 @@
     font-size: 48px;
     margin-bottom: 44px;
     text-align: center;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   h3 {
diff --git a/assets/stylesheets/new-stylesheets/pages/_index.scss b/assets/stylesheets/new-stylesheets/pages/_index.scss
index 4ed053510..bcd168cc2 100644
--- a/assets/stylesheets/new-stylesheets/pages/_index.scss
+++ b/assets/stylesheets/new-stylesheets/pages/_index.scss
@@ -23,6 +23,11 @@ $icons: (
     letter-spacing: 0;
     text-align: center;
     font-weight: 600;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   .callout-subtitle {
@@ -67,7 +72,7 @@ $icons: (
 
   @media only screen and (max-width: 1024px) {
     & {
-      padding: calc(72px + 142px) 10px 214px;
+      padding: calc(72px + 142px) 10px 24vw;
       padding-left: 10px;
       padding-right: 10px;
     }
@@ -92,6 +97,11 @@ $icons: (
     margin-bottom: 30px;
     position: relative;
     z-index: 3;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   /* Install */
@@ -119,6 +129,11 @@ $icons: (
     margin-bottom: 29px;
     position: relative;
     z-index: 1;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   .sub-text > h2 {
@@ -131,6 +146,12 @@ $icons: (
     margin-bottom: 60px;
     position: relative;
     z-index: 1;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 28px;
+      margin-bottom: 30px;
+      line-height: 1.33;
+    }
   }
 
   nav[aria-label='Get started with Swift'] {
@@ -170,8 +191,14 @@ $icons: (
 
             @each $name in $icons {
               &.#{$name} {
-                mask: url("/assets/images/icon-#{$name}.svg") center / contain no-repeat;
-                -webkit-mask: url("/assets/images/icon-#{$name}.svg") center / contain no-repeat;
+                mask: url('/assets/images/icon-#{$name}.svg')
+                  center /
+                  contain
+                  no-repeat;
+                -webkit-mask: url('/assets/images/icon-#{$name}.svg')
+                  center /
+                  contain
+                  no-repeat;
               }
             }
           }
@@ -332,16 +359,16 @@ $icons: (
   }
 }
 
-  body[data-color-scheme='dark'] {
-    .callout.with-code {
-      .code {
-        pre.highlight {
-          border: 1px solid #575757;
-          background: #111727;
-        }
+body[data-color-scheme='dark'] {
+  .callout.with-code {
+    .code {
+      pre.highlight {
+        border: 1px solid #575757;
+        background: #111727;
       }
     }
   }
+}
 
 #pillar-1 {
   background-image: var(--homepage-pillar-1-bg);
@@ -355,6 +382,10 @@ $icons: (
     background-position: 60% 0;
     @include lazyloadBg('/assets/images/landing-page/swoops/swoop-1.png');
   }
+
+  @media only screen and (max-width: 768px) {
+    padding-top: 17.88vw;
+  }
 }
 
 #pillar-2 {
@@ -383,4 +414,4 @@ $icons: (
   .callout-text {
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/get-started/embedded/index.md b/get-started/embedded/index.md
index 4c47a6934..fde269889 100644
--- a/get-started/embedded/index.md
+++ b/get-started/embedded/index.md
@@ -11,9 +11,6 @@ title: Embedded
 
 <!-- Runs on many embedded platforms -->
 
-<style>
-.card-grid p { margin-bottom: 20px; }
-</style>
 {% include new-includes/components/card-grid.html content = site.data.new-data.get-started.embedded.card-grid %}
 
 <!-- Explore example projects -->