Style fixes for several visual issues

- Blog page - tablet look without padding, wrong structure of containers
- Horizontal scroll on iPad iOS - Added tweeks to solve these floating Bg's issues
- Logo grid alignment, make it bigger on columns spaces

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>

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>

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>

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; }

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;

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; }  }