diff --git a/components/Common/CodeTabs/index.module.css b/components/Common/CodeTabs/index.module.css
index 63ca0a32e5bd7..e6e0110ad45d1 100644
--- a/components/Common/CodeTabs/index.module.css
+++ b/components/Common/CodeTabs/index.module.css
@@ -10,9 +10,9 @@
       border-t
       border-neutral-900
       bg-neutral-950
-      px-4
+      px-2
       pt-3
-      xs:px-2;
+      md:px-4;
 
     .trigger {
       @apply border-b
diff --git a/components/Common/LinkTabs/index.module.css b/components/Common/LinkTabs/index.module.css
index 99e8fc02bfddf..19f425c0b6713 100644
--- a/components/Common/LinkTabs/index.module.css
+++ b/components/Common/LinkTabs/index.module.css
@@ -7,7 +7,7 @@
     border-b-neutral-200
     font-open-sans
     dark:border-b-neutral-800
-    xs:hidden;
+    max-xs:hidden;
 
   .tabsTrigger {
     @apply border-b-2
@@ -36,6 +36,6 @@
     @apply my-6
       hidden
       w-full
-      xs:flex;
+      max-xs:flex;
   }
 }
diff --git a/components/Common/ProgressionSidebar/index.module.css b/components/Common/ProgressionSidebar/index.module.css
index 7e497da5120c4..0e968e12d4c9b 100644
--- a/components/Common/ProgressionSidebar/index.module.css
+++ b/components/Common/ProgressionSidebar/index.module.css
@@ -1,28 +1,28 @@
 .wrapper {
   @apply flex
+    w-full
     flex-col
     gap-8
     overflow-auto
-    border-r
+    border-r-0
     border-neutral-200
     bg-white
     px-4
     py-6
     dark:border-neutral-900
     dark:bg-neutral-950
+    sm:border-r
     md:max-w-xs
-    lg:px-6
-    xs:w-full
-    xs:border-r-0;
+    lg:px-6;
 
   > section {
-    @apply flex
-      xs:hidden;
+    @apply hidden
+      sm:flex;
   }
 
   > span {
-    @apply hidden
+    @apply flex
       w-full
-      xs:flex;
+      sm:hidden;
   }
 }
diff --git a/components/Containers/MetaBar/index.module.css b/components/Containers/MetaBar/index.module.css
index b585271ac212a..cd5e94ec8f05f 100644
--- a/components/Containers/MetaBar/index.module.css
+++ b/components/Containers/MetaBar/index.module.css
@@ -1,23 +1,16 @@
 .wrapper {
   @apply flex
+    w-full
     flex-col
     items-start
     gap-8
     overflow-y-auto
-    border-l
-    border-l-neutral-200
+    border-neutral-200
     px-4
     py-6
     [overflow-wrap:anywhere]
-    dark:border-l-neutral-900
-    md:max-w-xs
-    lg:px-6
-    xs:mt-8
-    xs:w-full
-    xs:border-l-0
-    xs:border-t
-    xs:border-t-neutral-200
-    xs:dark:border-t-neutral-900;
+    dark:border-neutral-900
+    lg:px-6;
 
   dl {
     @apply w-full;
@@ -45,8 +38,8 @@
         text-neutral-900
         underline
         dark:text-white
-        xs:inline-block
-        xs:py-1;
+        max-xs:inline-block
+        max-xs:py-1;
 
       &:hover {
         @apply text-neutral-800
diff --git a/components/Containers/Sidebar/index.module.css b/components/Containers/Sidebar/index.module.css
index 63cf0ba063ae9..370c181d5ca63 100644
--- a/components/Containers/Sidebar/index.module.css
+++ b/components/Containers/Sidebar/index.module.css
@@ -1,30 +1,29 @@
 .wrapper {
   @apply flex
+    w-full
     flex-col
     items-start
     gap-8
     overflow-auto
     overflow-x-hidden
-    border-r
     border-r-neutral-200
     bg-white
     px-4
     py-6
     dark:border-r-neutral-900
     dark:bg-neutral-950
+    sm:border-r
     md:max-w-xs
-    lg:px-6
-    xs:w-full
-    xs:border-r-0;
+    lg:px-6;
 
   > section {
-    @apply flex
-      xs:hidden;
+    @apply hidden
+      sm:flex;
   }
 
   > span {
-    @apply hidden
+    @apply flex
       w-full
-      xs:flex;
+      sm:hidden;
   }
 }
diff --git a/components/Downloads/ChangelogModal/index.module.css b/components/Downloads/ChangelogModal/index.module.css
index abd877387a03a..c5588e21c7f61 100644
--- a/components/Downloads/ChangelogModal/index.module.css
+++ b/components/Downloads/ChangelogModal/index.module.css
@@ -19,14 +19,14 @@
       border
       border-neutral-200
       bg-white
-      p-8
+      p-6
       focus:outline-none
       dark:border-neutral-900
       dark:bg-neutral-950
       sm:my-20
+      sm:p-8
       lg:max-w-[900px]
-      xl:p-12
-      xs:p-6;
+      xl:p-12;
   }
 
   .close {
diff --git a/components/withBlogCategories.tsx b/components/withBlogCategories.tsx
index 32526c5aa35ec..c682f929afaa2 100644
--- a/components/withBlogCategories.tsx
+++ b/components/withBlogCategories.tsx
@@ -30,7 +30,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
         tabs={categories}
         activeTab={blogData.category}
       >
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] xs:grid-cols-[1fr]">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] max-xs:grid-cols-[1fr]">
           {blogData.posts.map(post => (
             <BlogPostCard
               key={post.slug}
diff --git a/components/withBlogCrossLinks.tsx b/components/withBlogCrossLinks.tsx
index 27d0cb611c1cf..ceae8701f7cf5 100644
--- a/components/withBlogCrossLinks.tsx
+++ b/components/withBlogCrossLinks.tsx
@@ -22,7 +22,7 @@ const WithBlogCrossLinks: FC = async () => {
   ];
 
   return (
-    <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
+    <div className="mt-4 grid w-full grid-cols-2 gap-4 max-xs:grid-cols-1">
       {(previousCrossLink && (
         <CrossLink
           type="previous"
diff --git a/components/withSidebarCrossLinks.tsx b/components/withSidebarCrossLinks.tsx
index 143f7855ef70d..8b4513ddd2fd1 100644
--- a/components/withSidebarCrossLinks.tsx
+++ b/components/withSidebarCrossLinks.tsx
@@ -24,7 +24,7 @@ const WithSidebarCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
   ];
 
   return (
-    <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
+    <div className="mt-4 grid w-full grid-cols-1 gap-4 md:grid-cols-2">
       {(previousCrossLink && (
         <CrossLink
           type="previous"
diff --git a/layouts/About.tsx b/layouts/About.tsx
index ff0b3318f914c..ef2258cab5999 100644
--- a/layouts/About.tsx
+++ b/layouts/About.tsx
@@ -13,9 +13,11 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
     <ArticleLayout>
       <WithSidebar navKeys={['about', 'getInvolved']} />
 
-      <main>{children}</main>
+      <div>
+        <main>{children}</main>
 
-      <WithMetaBar />
+        <WithMetaBar />
+      </div>
 
       <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
     </ArticleLayout>
diff --git a/layouts/Default.tsx b/layouts/Default.tsx
index 3c538cba716c1..ad903411dadca 100644
--- a/layouts/Default.tsx
+++ b/layouts/Default.tsx
@@ -12,7 +12,9 @@ const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
     <ArticleLayout>
       <WithSidebar navKeys={[]} />
 
-      <main>{children}</main>
+      <div>
+        <main>{children}</main>
+      </div>
     </ArticleLayout>
 
     <WithFooter />
diff --git a/layouts/Learn.tsx b/layouts/Learn.tsx
index a837f980aa28b..6b4f6763f1925 100644
--- a/layouts/Learn.tsx
+++ b/layouts/Learn.tsx
@@ -14,13 +14,15 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
     <ArticleLayout>
       <WithProgressionSidebar navKey="learn" />
 
-      <main>
-        {children}
+      <div>
+        <main>
+          {children}
 
-        <WithSidebarCrossLinks navKey="learn" />
-      </main>
+          <WithSidebarCrossLinks navKey="learn" />
+        </main>
 
-      <WithMetaBar />
+        <WithMetaBar />
+      </div>
 
       <WithBreadcrumbs navKeys={['learn']} />
     </ArticleLayout>
diff --git a/layouts/layouts.module.css b/layouts/layouts.module.css
index b1f8abf8a5e2a..5c2197b363535 100644
--- a/layouts/layouts.module.css
+++ b/layouts/layouts.module.css
@@ -7,41 +7,54 @@
 
 .articleLayout {
   @apply mx-auto
-    grid
+    block
     w-full
     max-w-8xl
-    grid-rows-[1fr]
-    overflow-hidden
-    grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
-    sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
-    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
-    xs:m-0
-    xs:block
-    xs:overflow-auto;
+    overflow-auto
+    sm:grid
+    sm:grid-cols-[theme(spacing.52)_1fr]
+    sm:grid-rows-[1fr]
+    sm:overflow-hidden
+    sm:grid-areas-[sidebar_main,sidebar_footer]
+    md:grid-cols-[theme(spacing.64)_1fr]
+    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
     @apply grid-in-[sidebar];
   }
 
   > *:nth-child(2) {
-    @apply overflow-y-auto
-      overflow-x-hidden
-      bg-gradient-subtle
-      p-12
-      grid-in-[main]
-      motion-safe:scroll-smooth
-      dark:bg-gradient-subtle-dark
-      xl:px-18
-      xs:bg-none
-      xs:p-4
-      xs:dark:bg-none;
-  }
+    @apply contents
+      overflow-y-scroll
+      sm:max-lg:block;
 
-  > *:nth-child(3) {
-    @apply grid-in-[metabar];
+    > *:first-child {
+      @apply overflow-y-auto
+        overflow-x-hidden
+        p-4
+        grid-in-[main]
+        motion-safe:scroll-smooth
+        sm:bg-gradient-subtle
+        sm:bg-fixed
+        sm:p-12
+        sm:dark:bg-gradient-subtle-dark
+        xl:px-18;
+    }
+
+    > *:last-child {
+      @apply mt-8
+        border-t
+        grid-in-[metabar]
+        sm:mt-0
+        lg:max-w-xs
+        lg:border-l
+        lg:border-t-0;
+    }
   }
 
-  > *:nth-child(4) {
+  > *:nth-child(3) {
     @apply sticky
       bottom-0
       flex
@@ -107,7 +120,7 @@
             text-sm
             text-neutral-800
             dark:text-neutral-400
-            xs:text-xs;
+            max-xs:text-xs;
 
           sup {
             @apply cursor-help;
@@ -150,8 +163,8 @@
     justify-center
     bg-gradient-subtle
     dark:bg-gradient-subtle-dark
-    xs:bg-none
-    xs:dark:bg-none;
+    max-xs:bg-none
+    max-xs:dark:bg-none;
 
   main {
     @apply max-w-5xl
@@ -190,10 +203,10 @@
     w-full
     max-w-8xl
     grid-rows-[1fr]
+    max-xs:m-0
+    max-xs:block
     sm:grid-cols-[1fr_theme(spacing.52)]
-    xl:grid-cols-[1fr_theme(spacing.80)]
-    xs:m-0
-    xs:block;
+    xl:grid-cols-[1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
     @apply flex
@@ -206,12 +219,12 @@
       py-14
       dark:border-l-neutral-900
       dark:bg-gradient-subtle-dark
+      max-xs:border-l-0
+      max-xs:bg-none
+      max-xs:pb-4
+      max-xs:dark:bg-none
       md:px-14
-      lg:px-28
-      xs:border-l-0
-      xs:bg-none
-      xs:pb-4
-      xs:dark:bg-none;
+      lg:px-28;
 
     main {
       @apply max-w-[660px]
@@ -220,6 +233,15 @@
         lg:break-normal;
     }
   }
+
+  > *:nth-child(2) {
+    @apply mt-8
+      border-t
+      xs:mt-0
+      xs:max-w-xs
+      xs:border-l
+      xs:border-t-0;
+  }
 }
 
 .postLayout {
diff --git a/styles/markdown.css b/styles/markdown.css
index 30f055a0bbe59..3ef93efb048d9 100644
--- a/styles/markdown.css
+++ b/styles/markdown.css
@@ -79,7 +79,7 @@ main {
   .anchor {
     @apply text-green-600
       dark:text-green-400
-      xs:font-semibold;
+      max-xs:font-semibold;
 
     &:hover {
       @apply text-green-900
@@ -87,12 +87,12 @@ main {
     }
 
     &[role='button'] {
-      @apply xs:font-regular;
+      @apply max-xs:font-regular;
     }
 
     &:has(code) {
-      @apply xs:decoration-neutral-800
-        dark:xs:decoration-neutral-200;
+      @apply max-xs:decoration-neutral-800
+        dark:max-xs:decoration-neutral-200;
     }
   }
 
@@ -144,8 +144,8 @@ main {
         text-neutral-900
         dark:border-neutral-800
         dark:text-white
-        xs:block
-        xs:border-l-0;
+        max-xs:block
+        max-xs:border-l-0;
 
       > a {
         @apply pr-2;
@@ -160,7 +160,7 @@ main {
       @apply sm:border-b-0;
 
       &:last-child {
-        @apply xs:border-b-0;
+        @apply max-xs:border-b-0;
       }
     }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 54767ff20f8cb..60992522b0ca3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -118,7 +118,7 @@ export default {
       'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
     },
     extend: {
-      screens: { xs: { max: '670px', min: '0px' } },
+      screens: { xs: '670px' },
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-subtle':