Shop WIP

src/style/organisms/_poster-product.scss

@@ -1,30 +1,45 @@
 .poster-product {
     background-color: $color-cream;
 
+    @include bp (sm) {
+        display: grid
+    }
+
     // Title Location
     h2 {
-        grid-column: 2 / span calc(var(--columns) - 1);
+        grid-column: 1 / span var(--columns);
         font-size: clamp(200px, 20vw, 340px);
         color: $color-secondary;
-        text-align: center;
-        margin-bottom: 48px;
+        margin-bottom: 40px;
+
+        @include bp (sm) {
+            grid-column: 2 / span calc(var(--columns) - 1);
+            text-align: center;
+            margin-bottom: 48px;
+        }
     }
 
     // Poster Product
-    &__buy {
-        grid-column: 2 / span 10;
 
-        img {
-            display: block;
-            width: 100%;
-            height: auto;
+    // Poster Display
+    &__buy {
+        grid-column: 1 / span var(--columns);
+        margin: 0 20px 48px;
+
+        @include bp (sm) {
+            grid-column: 2 / span 10;
+            margin: 0;
         }
 
         // Product Info
         .info {
             display: flex;
             justify-content: space-between;
-            margin-top: 36px;
+            margin-bottom: 32px;
+
+            @include bp (sm) {
+                margin-bottom: 72px;
+            }
         }
 
         // Title
@@ -40,15 +55,31 @@
             font-size: rem(16px);
             color: $color-gray;
             margin-top: 8px;
+            max-width: 140px;
+
+            @include bp (sm) {
+                max-width: none;
+            }
+        }
+
+        // Image
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+            border-radius: 6px;
         }
     }
 
     // Images set
     &__images {
-        --columns: 10;
-        grid-column: 14 / span var(--columns);
-        position: relative;
-        z-index: 2;
+
+        @include bp (sm) {
+            --columns: 10;
+            position: relative;
+            z-index: 2;
+            grid-column: 14 / span var(--columns);
+        }
 
         .image {
             border-radius: 6px;
@@ -62,44 +93,75 @@
 
         // Image 1
         .image--first {
-            grid-column: 1 / span 10;
+            grid-column: 1 / span 7;
         }
         // Image 2
         .image--second {
             grid-column: 2 / span 5;
-            margin: 48px 0;
+            margin: 32px 0;
+
+            @include bp (sm) {
+                margin: 48px 0;
+            }
         }
         // Image 3
         .image--third {
-            grid-column: 5 / span 5;
+            grid-column: 4 / span 5;
+            z-index: 10;
+            margin-bottom: -64px;
+
+            @include bp (sm) {
+                grid-column: 5 / span 5;
+                margin-bottom: 0;
+            }
         }
     }
 
     // About
     &__about {
         background-color: #fff;
-        padding: 148px 0 260px;
-        margin: -80px 0 -120px;
+        padding: 144px 0 72px;
+        margin: -100px 0 -120;
         font-size: rem(36px);
         font-weight: 300;
         color: $color-primary-tertiary20;
         line-height: 1.4;
 
+        @include bp (sm) {
+            padding: 148px 0 260px;
+            margin: -120px 0;
+        }
+
         .text {
-            grid-column: 4 / span 13;
+            grid-column: 1 / span 8;
+            font-size: rem(28px);
+
+            @include bp (sm) {
+                grid-column: 4 / span 12;
+                font-size: rem(32px);
+            }
         }
 
         .details {
             color: $color-gray;
-            font-size: rem(18px);
-            margin-top: 56px;
+            font-size: rem(16px);
+            margin-top: 32px;
             line-height: 1.5;
+
+            @include bp (sm) {
+                margin-top: 56px;
+                font-size: rem(18px);
+            }
         }
     }
 
     // Single Image
     &__image {
-        margin-bottom: 120px;
+        margin-bottom: 56px;
+
+        @include bp (sm) {
+            margin-bottom: 120px;
+        }
 
         .image {
             border-radius: 6px;
@@ -113,7 +175,11 @@
 
         // Image 4
         .image--fourth {
-            grid-column: 8 / span 13;
+            grid-column: 1 / span 8;
+
+            @include bp (sm) {
+                grid-column: 8 / span 13;
+            }
         }
     }
 }