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