Fix PostCard responsive and add small size variant

src/components/molecules/PostCard.svelte

@@ -6,14 +6,22 @@
     export let region: string = undefined
     export let country: string
     export let flagId: string
+    export let size: string = undefined
+
+    const className = 'postcard'
+    $: classes = [
+        className,
+        ...[size].map(variant => variant && `${className}--${variant}`),
+        $$props.class
+    ].join(' ').trim()
 </script>
 
-<div class="postcard">
+<div class={classes}>
     <div class="postcard__left">
-        <h3 class="postcard__country">
+        <p class="postcard__country">
             <span>Houses of</span><br>
             <strong class="title-country__purple">{country}</strong>
-        </h3>
+        </p>
     </div>
     <div class="postcard__right">
         <div class="postcard__stamp">

src/style/modules/_postcard.scss

@@ -8,9 +8,10 @@
     height: 100%;
     max-width: 333px;
     max-height: 222px;
-    padding: clamp(12px, 1vw, 20px);
+    padding-top: clamp(12px, 1vw, 20px);
-    padding-left: var(--gap);
     padding-right: calc(var(--gap) * 2);
+    padding-bottom: clamp(12px, 1.25vw, 32px);
+    padding-left: var(--gap);
     background: $color-cream;
     box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
 
@@ -34,11 +35,18 @@
     &__country {
         position: relative;
         margin-top: auto;
-        font-size: clamp(#{rem(12px)}, 1.2vw, #{rem(22px)});
+        font-size: clamp(#{rem(14px)}, 2vw, #{rem(22px)});
         color: $color-primary;
         font-family: $font-serif;
         line-height: 1.1;
 
+        @include bp (sm) {
+            font-size: clamp(#{rem(14px)}, 2.5vw, #{rem(22px)});
+        }
+        @include bp (sd) {
+            font-size: clamp(#{rem(14px)}, 1.35vw, #{rem(22px)});
+        }
+
         strong {
             color: $color-secondary;
             font-weight: 300;
@@ -57,6 +65,9 @@
             height: auto;
         }
 
+        .frame {
+            width: 32px;
+        }
         .flag {
             position: absolute;
             top: 10px;
@@ -69,8 +80,6 @@
             overflow: hidden;
 
             img {
-                display: block;
-                width: 100%;
                 height: 100%;
                 object-fit: contain;
             }
@@ -87,9 +96,91 @@
             display: block;
             margin-bottom: clamp(2px, 0.25vw, 4px);
             color: $color-text;
-            font-size: clamp(#{rem(11px)}, 0.8vw, #{rem(16px)});
+            font-size: clamp(#{rem(11px)}, 1.2vw, #{rem(16px)});
             line-height: 1.4;
             border-bottom: 1px solid #D9CABD;
+
+            @include bp (sd) {
+                font-size: clamp(#{rem(12px)}, 0.8vw, #{rem(16px)});
+            }
+        }
+    }
+
+
+
+    /*
+    ** Variants
+    */
+    // Small size
+    &--small {
+        opacity: 1 !important;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+        transform: none !important;
+        max-width: 100%;
+        max-height: 100%;
+        grid-template: 1fr 2fr / 1fr;
+        padding: 12px;
+
+        ul {
+            padding-left: 0;
+        }
+
+        .postcard {
+            // Country
+            &__left {
+                height: auto;
+                border: none;
+                margin: auto 0;
+                padding-right: 40px;
+
+                br {
+                    display: none;
+                }
+            }
+            &__country {
+                font-size: clamp(#{rem(12px)}, 3.25vw, #{rem(24px)});
+
+                @include bp (sm) {
+                    font-size: clamp(#{rem(12px)}, 1.75vw, #{rem(20px)});
+                }
+                @include bp (sd) {
+                    font-size: clamp(#{rem(12px)}, 1.5vw, #{rem(22px)});
+                }
+            }
+
+            // Infos
+            &__right {
+                position: static;
+
+                .flag {
+                    width: 18px;
+                    height: 18px;
+                }
+            }
+            &__stamp {
+                top: 8px;
+                right: 8px;
+
+                .frame {
+                    width: 28px;
+                }
+            }
+            &__address {
+                li {
+                    font-size: clamp(#{rem(10px)}, 2vw, #{rem(16px)});
+
+                    @include bp (sm) {
+                        font-size: clamp(#{rem(11px)}, 1.1vw, #{rem(16px)});
+                    }
+                    @include bp (sd) {
+                        font-size: clamp(#{rem(11px)}, 0.9vw, #{rem(16px)});
+                    }
+                }
+            }
         }
     }
 }

src/style/pages/_photos.scss

@@ -325,6 +325,10 @@
                 opacity: 0;
                 transform: translate3d(12%, 23%, 0) rotate(-5deg);
                 transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
+
+                &--small {
+                    border-radius: 0;
+                }
             }
 
             // Show postcard on hover