Create Post Card component

src/components/molecules/PostCard.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import Image from '$components/atoms/Image.svelte';
+
+</script>
+
+<div class="post-card">
+    <div class="wrap">
+        <div class="post-card__stamp">
+            <div class="frame">
+                <img src="/images/icons/stamp.svg" width="32" height="42" alt="">
+            </div>
+            <Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} />
+        </div>
+        <h3 class="post-card__country">
+            <span>Houses of <br></span>
+            <strong class="title-country__purple">France</strong>
+        </h3>
+        <div class="post-card__border"></div>
+        <ul class="post-card__address">
+            <li>
+                <p>Rue Clerisseau</p>
+            </li>
+            <li>
+                <p>Nimes, Occitanie</p>
+            </li>
+            <li>
+                <p>France</p>
+            </li>
+        </ul>
+    </div>
+</div>

src/style/modules/_post-card.scss

@@ -0,0 +1,88 @@
+.post-card {
+    width: 100%;
+    height: 100%;
+    max-width: 333px;
+    max-height: 222px;
+    background: $color-cream;
+
+    .wrap {
+        display: flex;
+        height: 100%;
+        padding: 40px 20px;
+    }
+
+    // Stamp
+    &__stamp {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        flex-shrink: 0;
+
+        img {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+
+        .flag {
+            position: absolute;
+            top: 10px;
+            left: -8px;
+            transform: rotate(-16deg);
+            width: 24px;
+            height: 24px;
+            box-shadow: 0 0 0 3px $color-cream;
+            border-radius: 100%;
+            overflow: hidden;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+        }
+    }
+
+    // Country Title
+    &__country {
+        position: relative;
+        min-width: 105px;
+        margin-top: auto;
+        margin-right: 15px;
+        font-size: rem(20px);
+        color: $color-primary;
+        font-family: $font-serif;
+        line-height: 1.1;
+
+        strong {
+            color: $color-secondary;
+            font-weight: 300;
+        }
+    }
+
+    // Border Line
+    &__border {
+        background-color: rgba(#000, 0.2);
+        height: 180px;
+        width: 1px;
+        margin-top: auto;
+    }
+
+    // Address
+    ul {
+        width: 60%;
+        margin-top: auto;
+        margin-left: 20px;
+
+        li {
+            display: block;
+            border-bottom: 1px solid #D9CABD;
+            margin-bottom: 2px;
+        }
+        p {
+            color: $color-text;
+            font-size: rem(14px);
+            line-height: 1.4;
+        }
+    }
+}

src/style/style.scss

@@ -25,6 +25,7 @@
 
 // Modules
 @import "modules/globe";
+@import "modules/post-card";
 
 
 // Atomic Design System