diff --git a/src/markdoc/layouts/Category.svelte b/src/markdoc/layouts/Category.svelte
index 8ed88a96a7..d169e781d6 100644
--- a/src/markdoc/layouts/Category.svelte
+++ b/src/markdoc/layouts/Category.svelte
@@ -40,7 +40,7 @@
 	<div class="aw-big-padding-section-level-1">
 		<div class="aw-big-padding-section-level-2">
 			<div class="aw-container">
-				<a class="aw-link aw-u-color-text-secondary" href="/blog">
+				<a class="aw-link aw-u-color-text-secondary u-cross-baseline" href="/blog">
 					<span class="aw-icon-chevron-left" aria-hidden="true" />
 					<span>Back to blog</span>
 				</a>
diff --git a/src/markdoc/layouts/Post.svelte b/src/markdoc/layouts/Post.svelte
index dab7e2237a..1aa9f9a6d2 100644
--- a/src/markdoc/layouts/Post.svelte
+++ b/src/markdoc/layouts/Post.svelte
@@ -64,7 +64,7 @@
                     <div class="aw-container" style="--container-size:42.5rem">
                         <article class="aw-main-article">
                             <header class="aw-main-article-header">
-                                <a class="aw-link aw-u-color-text-secondary" href="/blog">
+                                <a class="aw-link aw-u-color-text-secondary u-cross-baseline" href="/blog">
                                     <span class="aw-icon-chevron-left" aria-hidden="true" />
                                     <span>Back to blog</span>
                                 </a>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 17a8c1120b..5ac0cc2296 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -31,174 +31,176 @@
 </svelte:head>
 
 <Main>
-    <div class="aw-big-padding-section-level-1 u-position-relative">
-        <div
-            class="u-position-absolute"
-            style="pointer-events:none;inset-inline-start:0; inset-block-end:0;"
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="660"
-                height="497"
-                viewBox="0 0 660 497"
-                fill="none"
+    <div class="aw-big-padding-section">
+        <div class="aw-big-padding-section-level-1 u-position-relative">
+            <div
+                    class="u-position-absolute"
+                    style="pointer-events:none;inset-inline-start:0; inset-block-end:0;"
             >
-                <g opacity="0.4" filter="url(#filter0_f_2092_11792)">
-                    <ellipse
-                        cx="-2.5"
-                        cy="609.5"
-                        rx="362.5"
-                        ry="309.5"
-                        fill="url(#paint0_radial_2092_11792)"
-                    />
-                </g>
-                <defs>
-                    <filter
-                        id="filter0_f_2092_11792"
-                        x="-665"
-                        y="0"
-                        width="1325"
-                        height="1219"
-                        filterUnits="userSpaceOnUse"
-                        color-interpolation-filters="sRGB"
-                    >
-                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                        <feBlend
-                            mode="normal"
-                            in="SourceGraphic"
-                            in2="BackgroundImageFix"
-                            result="shape"
+                <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="660"
+                        height="497"
+                        viewBox="0 0 660 497"
+                        fill="none"
+                >
+                    <g opacity="0.4" filter="url(#filter0_f_2092_11792)">
+                        <ellipse
+                                cx="-2.5"
+                                cy="609.5"
+                                rx="362.5"
+                                ry="309.5"
+                                fill="url(#paint0_radial_2092_11792)"
                         />
-                        <feGaussianBlur
-                            stdDeviation="150"
-                            result="effect1_foregroundBlur_2092_11792"
-                        />
-                    </filter>
-                    <radialGradient
-                        id="paint0_radial_2092_11792"
-                        cx="0"
-                        cy="0"
-                        r="1"
-                        gradientUnits="userSpaceOnUse"
-                        gradientTransform="translate(-2.5 629.739) rotate(90) scale(289.261 362.5)"
-                    >
-                        <stop offset="0.281696" stop-color="#FE9567" />
-                        <stop offset="0.59375" stop-color="#FD366E" />
-                    </radialGradient>
-                </defs>
-            </svg>
-        </div>
+                    </g>
+                    <defs>
+                        <filter
+                                id="filter0_f_2092_11792"
+                                x="-665"
+                                y="0"
+                                width="1325"
+                                height="1219"
+                                filterUnits="userSpaceOnUse"
+                                color-interpolation-filters="sRGB"
+                        >
+                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                            <feBlend
+                                    mode="normal"
+                                    in="SourceGraphic"
+                                    in2="BackgroundImageFix"
+                                    result="shape"
+                            />
+                            <feGaussianBlur
+                                    stdDeviation="150"
+                                    result="effect1_foregroundBlur_2092_11792"
+                            />
+                        </filter>
+                        <radialGradient
+                                id="paint0_radial_2092_11792"
+                                cx="0"
+                                cy="0"
+                                r="1"
+                                gradientUnits="userSpaceOnUse"
+                                gradientTransform="translate(-2.5 629.739) rotate(90) scale(289.261 362.5)"
+                        >
+                            <stop offset="0.281696" stop-color="#FE9567" />
+                            <stop offset="0.59375" stop-color="#FD366E" />
+                        </radialGradient>
+                    </defs>
+                </svg>
+            </div>
 
-        <div class="aw-big-padding-section-level-2 u-position-relative">
-            <div class="aw-container">
-                <h1 class="aw-display aw-u-color-text-primary">Blog</h1>
-                {#if featured}
-                    {@const author = data.authors.find((author) => author.slug === featured.author)}
-                    <article class="aw-feature-article u-margin-block-start-48">
-                        <a href={featured.href} class="aw-feature-article-image">
-                            <img src={featured.cover} class="aw-image-ratio-4/3" alt="cover" />
-                        </a>
-                        <div class="aw-feature-article-content">
-                            <header class="aw-feature-article-header">
-                                <ul class="aw-metadata aw-caption-400 aw-is-only-mobile">
-                                    <li>{featured.timeToRead} min</li>
-                                </ul>
-                                <a href={featured.href}>
-                                    <h2 class="aw-title aw-u-color-text-primary">
-                                        {featured.title}
-                                    </h2>
-                                </a>
-                            </header>
-                            <p class="aw-sub-body-400">
-                                {featured.description}
-                            </p>
-                            <div class="aw-author">
-                                <div class="u-flex u-cross-center u-gap-8">
-                                    <img
-                                        class="aw-author-image"
-                                        src={author?.avatar}
-                                        width="24"
-                                        height="24"
-                                        alt=""
-                                    />
-                                    <div class="aw-author-info">
-                                        <a href={author?.href} class="aw-sub-body-400 aw-link"
+            <div class="aw-big-padding-section-level-2 u-position-relative">
+                <div class="aw-container">
+                    <h1 class="aw-display aw-u-color-text-primary">Blog</h1>
+                    {#if featured}
+                        {@const author = data.authors.find((author) => author.slug === featured.author)}
+                        <article class="aw-feature-article u-margin-block-start-48">
+                            <a href={featured.href} class="aw-feature-article-image">
+                                <img src={featured.cover} class="aw-image-ratio-4/3" alt="cover" />
+                            </a>
+                            <div class="aw-feature-article-content">
+                                <header class="aw-feature-article-header">
+                                    <ul class="aw-metadata aw-caption-400 aw-is-only-mobile">
+                                        <li>{featured.timeToRead} min</li>
+                                    </ul>
+                                    <a href={featured.href}>
+                                        <h2 class="aw-title aw-u-color-text-primary">
+                                            {featured.title}
+                                        </h2>
+                                    </a>
+                                </header>
+                                <p class="aw-sub-body-400">
+                                    {featured.description}
+                                </p>
+                                <div class="aw-author">
+                                    <div class="u-flex u-cross-center u-gap-8">
+                                        <img
+                                                class="aw-author-image"
+                                                src={author?.avatar}
+                                                width="24"
+                                                height="24"
+                                                alt=""
+                                        />
+                                        <div class="aw-author-info">
+                                            <a href={author?.href} class="aw-sub-body-400 aw-link"
                                             >{author?.name}</a
-                                        >
-                                        <p class="aw-caption-400 u-hide">{author?.bio}</p>
-                                        <ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
-                                            <li>{featured.timeToRead} min</li>
-                                        </ul>
+                                            >
+                                            <p class="aw-caption-400 u-hide">{author?.bio}</p>
+                                            <ul class="aw-metadata aw-caption-400 aw-is-not-mobile">
+                                                <li>{featured.timeToRead} min</li>
+                                            </ul>
+                                        </div>
                                     </div>
+                                    <ul class="u-flex u-gap-8 u-margin-inline-start-auto u-hide">
+                                        <li>
+                                            <a
+                                                    href="https://twitter.com/appwrite"
+                                                    class="aw-icon-button"
+                                                    aria-label="Author twitter"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                            >
+                                                <span class="aw-icon-x" aria-hidden="true" />
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a
+                                                    href="https://twitter.com/appwrite"
+                                                    class="aw-icon-button"
+                                                    aria-label="Author LinkedIn"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                            >
+                                                <span class="aw-icon-linkedin" aria-hidden="true" />
+                                            </a>
+                                        </li>
+                                    </ul>
                                 </div>
-                                <ul class="u-flex u-gap-8 u-margin-inline-start-auto u-hide">
-                                    <li>
-                                        <a
-                                            href="https://twitter.com/appwrite"
-                                            class="aw-icon-button"
-                                            aria-label="Author twitter"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                        >
-                                            <span class="aw-icon-x" aria-hidden="true" />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href="https://twitter.com/appwrite"
-                                            class="aw-icon-button"
-                                            aria-label="Author LinkedIn"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                        >
-                                            <span class="aw-icon-linkedin" aria-hidden="true" />
-                                        </a>
-                                    </li>
-                                </ul>
+                                <a
+                                        href={featured.href}
+                                        class="aw-button is-secondary u-margin-block-start-auto"
+                                >
+                                    <span>Read article</span>
+                                </a>
                             </div>
-                            <a
-                                href={featured.href}
-                                class="aw-button is-secondary u-margin-block-start-auto"
-                            >
-                                <span>Read article</span>
-                            </a>
-                        </div>
-                    </article>
-                {/if}
+                        </article>
+                    {/if}
+                </div>
             </div>
         </div>
-    </div>
-    <div class="aw-big-padding-section-level-1">
-        <div class="aw-big-padding-section-level-2">
-            <div class="aw-container">
-                <h2 class="aw-title aw-u-color-text-primary">Articles</h2>
+        <div class="aw-big-padding-section-level-1">
+            <div class="aw-big-padding-section-level-2">
+                <div class="aw-container">
+                    <h2 class="aw-title aw-u-color-text-primary">Articles</h2>
 
-                <div class="u-margin-block-start-48">
-                    <ul class="aw-grid-articles">
-                        {#each data.posts as post}
-                            {@const author = data.authors.find(
-                                (author) => author.slug === post.author
-                            )}
-                            {#if author}
-                                <Article
-                                    title={post.title}
-                                    href={post.href}
-                                    cover={post.cover}
-                                    date={post.date}
-                                    timeToRead={post.timeToRead}
-                                    avatar={author.avatar}
-                                    author={author.name}
-                                />
-                            {/if}
-                        {/each}
-                    </ul>
+                    <div class="u-margin-block-start-48">
+                        <ul class="aw-grid-articles">
+                            {#each data.posts as post}
+                                {@const author = data.authors.find(
+                                    (author) => author.slug === post.author
+                                )}
+                                {#if author}
+                                    <Article
+                                            title={post.title}
+                                            href={post.href}
+                                            cover={post.cover}
+                                            date={post.date}
+                                            timeToRead={post.timeToRead}
+                                            avatar={author.avatar}
+                                            author={author.name}
+                                    />
+                                {/if}
+                            {/each}
+                        </ul>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="aw-big-padding-section-level-2">
-            <div class="aw-container">
-                <FooterNav />
-                <MainFooter />
+            <div class="aw-big-padding-section-level-2">
+                <div class="aw-container">
+                    <FooterNav />
+                    <MainFooter />
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index d7622eb300..6c8a6dfe61 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -69,7 +69,7 @@
         <enhanced:img src="./blur-1.png" alt="" />
     </div>
 
-    <main class="aw-main-section u-position-relative" id="main">
+    <main class="aw-main-section u-position-relative aw-u-overflow-hidden-break1-to-break3" id="main">
         <div class="u-position-absolute aw-u-opacity-40-mobile bg-blur">
             <img src="/images/bgs/docs-blur-1.svg" alt="" />
         </div>
diff --git a/src/scss/7-components/_hero.scss b/src/scss/7-components/_hero.scss
index 88b50a4088..7a4944f3bd 100644
--- a/src/scss/7-components/_hero.scss
+++ b/src/scss/7-components/_hero.scss
@@ -29,6 +29,7 @@
       >:nth-child(1) { flex:1.3; }
       >:nth-child(2) { flex:1;   }
     }
+    @media #{$break1}, #{$break2}, #{$break3} { overflow:hidden; }
   }
 
   &.is-no-max-width { max-inline-size:initial; }
diff --git a/src/scss/9-grids/_grid-3c-4c-6c.scss b/src/scss/9-grids/_grid-3c-4c-6c.scss
index f435996f7b..cf3c45ebf5 100644
--- a/src/scss/9-grids/_grid-3c-4c-6c.scss
+++ b/src/scss/9-grids/_grid-3c-4c-6c.scss
@@ -2,9 +2,9 @@
 
 .#{$p}-grid-3c-4c-6c {
   display: grid;
-  @media #{$break1}     { grid-template-columns: repeat(3, 1fr); gap:pxToRem(20); }
-  @media #{$break2}     { grid-template-columns: repeat(4, 1fr); column-gap:pxToRem(20); row-gap:pxToRem(40); }
-  @media #{$break3open} { grid-template-columns: repeat(6, 1fr); column-gap:pxToRem(20); row-gap:pxToRem(40); }
+  @media #{$break1}     { grid-template-columns: repeat(3, 1fr); gap:pxToRem(40); }
+  @media #{$break2}     { grid-template-columns: repeat(4, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); }
+  @media #{$break3open} { grid-template-columns: repeat(6, 1fr); column-gap:pxToRem(40); row-gap:pxToRem(40); }
 
   &.is-for-logos {
     text-align:center;
diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
index 5f9b3577fb..0b1795e4b1 100644
--- a/src/scss/_10-utilities.scss
+++ b/src/scss/_10-utilities.scss
@@ -5,6 +5,12 @@
 .#{$p}-u-opacity-64                 { opacity:0.64!important; }
 .#{$p}-u-opacity-90                 { opacity:0.9!important;  }
 
+.#{$p}-u-overflow-hidden-break1-to-break3 {
+  @media #{$break1}, #{$break2}, #{$break3} {
+    overflow:hidden;
+  }
+}
+
 .#{$p}-u-flex-vertical                {display:flex!important; flex-direction:column!important; }
 .#{$p}-u-flex-vertical-mobile         { @media #{$break1} { flex-direction:column!important; }  }
 .#{$p}-u-flex-vertical-reverse-mobile { @media #{$break1} { flex-direction:column-reverse!important; }  }