Add latest issue part on Subscribe page and Create component for Issue

src/style/molecules/_issue.scss

@@ -8,21 +8,29 @@
 
     a {
         display: flex;
+        width: 100%;
         padding: 20px;
         text-decoration: none;
     }
     // Image
-    :global(img) {
+    :global(picture) {
         $shadow-color: rgba(#936B47, 0.06);
-        display: block;
         width: 80px;
-        height: 56px;
         margin-right: 16px;
+        margin-bottom: auto;
+        overflow: hidden;
         border-radius: 3px;
         box-shadow:
             0 1.5px 1.5px $shadow-color,
             0 3px 3px $shadow-color,
             0 12px 12px $shadow-color;
+
+        :global(img) {
+            display: block;
+            width: 100%;
+            height: auto;
+            object-fit: cover;
+        }
     }
     // Title
     dt {
@@ -61,7 +69,6 @@
         transition: transform 0.7s var(--ease-quart);
     }
 
-
     // Hover
     &:hover {
         background: $color-cream;
@@ -74,4 +81,38 @@
             transform: rotate(3deg) translateZ(0);
         }
     }
+
+
+    // Large Variant
+    &.is-large {
+        a {
+            @include bp (sm) {
+                padding: 28px 64px;
+            }
+        }
+        dt {
+            @include bp (sm) {
+                font-size: rem(24px);
+            }
+        }
+        dd {
+            @include bp (sm) {
+                font-size: rem(16px);
+            }
+        }
+        time {
+            @include bp (sm) {
+                margin-top: 16px;
+                font-size: rem(14px);
+            }
+        }
+        :global(picture) {
+            @include bp (sm) {
+                width: 200px;
+                max-height: 140px;
+                border-radius: 6px;
+                margin-right: 40px;
+            }
+        }
+    }
 }

src/style/pages/_subscribe.scss

@@ -34,11 +34,16 @@
         // Title
         h2 {
             text-align: center;
+            margin-top: 40px;
+            margin-bottom: 24px;
+
+            @include bp (sm) {
+                margin-top: 64px;
+                margin-bottom: 32px;
+            }
         }
 
         ul {
-            margin-top: 32px;
-
             @include bp (sm) {
                 display: grid;
                 grid-template-columns: repeat(2, 1fr);
@@ -52,10 +57,11 @@
             @include bp (sm) {
                 margin-bottom: 0;
             }
-        }
 
-        // Issue
-        @import "../molecules/issue";
+            & > :global(*) {
+                height: 100%;
+            }
+        }
     }
 }