Change Shop About section layout

src/routes/shop/__layout.svelte

@@ -129,7 +129,11 @@
     </nav>
 
     <section class="shop-page__about grid">
-        <p class="description text-normal">{shop.about}</p>
+        <div class="description grid text-normal">
+            <div class="description__inner">
+                {@html shop.about}
+            </div>
+        </div>
     </section>
 
     <PosterLayout

src/style/layouts/_poster.scss

@@ -14,8 +14,7 @@
 
         @include bp (sm) {
             grid-column: 2 / span calc(var(--columns) - 1);
-            text-align: center;
+            margin-bottom: 88px;
-            margin-bottom: 48px;
         }
     }
 

src/style/pages/_shop.scss

@@ -192,10 +192,6 @@
             left: 0;
             width: 100%;
 
-            @include bp (md) {
-                height: 80px;
-            }
-
             .container {
                 padding: 0 16px 24px;
 
@@ -259,30 +255,45 @@
 
     // About
     &__about {
-        display: flex;
         background-color: $color-cream;
         color: $color-text;
-        padding: 100px 0 56px;
-
-        @include bp (sm) {
-            display: grid;
-            padding: 120px 0;
-        }
 
         .description {
-            font-weight: 300;
+            --columns: 8;
-            max-width: 450px;
+            grid-column: 1 / span var(--columns);
-            margin-left: 20px;
+            margin-bottom: -96px;
-            padding-right: 20px;
+            padding: 88px 0 160px;
             font-size: rem(18px);
+            font-weight: 200;
             white-space: pre-line;
+            background: #fff;
+            border-radius: 0 0 12px 0;
+            box-shadow: 0 0 16px rgba(#000, 0.05);
+
+            @include bp (mob-lg) {
+                --columns: 7;
+            }
+            @include bp (sm) {
+                --columns: 17;
+                margin-bottom: -160px;
+                padding: 160px 0 274px;
+                font-size: rem(22px);
+            }
+            @include bp (lg) {
+                --columns: 13;
+            }
+
+            &__inner {
+                grid-column: 2 / span calc(var(--columns) - 2);
 
                 @include bp (sm) {
-                grid-column: 3 / span 12;
+                    grid-column: 3 / span calc(var(--columns) - 5);
-                max-width: 560px;
+                }
-                margin-left: 0;
+            }
-                padding: 0;
+
-                font-size: rem(22px);
+            strong {
+                font-weight: 400;
+                color: $color-secondary;
             }
         }
     }