✨ Define small PostCard from photo index

src/style/modules/_postcard.scss

@@ -113,13 +113,11 @@
     */
     // 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;

src/style/pages/_photos.scss

@@ -204,30 +204,40 @@
         background-color: $color-tertiary;
 
         @include bp (sm) {
+            padding: clamp(40px, 5vw, 64px) 24px;
+        }
+        @include bp (md) {
             margin: 0 30px;
-            padding: clamp(40px, 5vw, 64px) 0;
+            padding-left: 0;
+            padding-right: 0;
         }
 
         &:before, &:after {
-            content: "";
-            display: block;
-            position: absolute;
-            z-index: -1;
-            top: 0;
-            width: 25%;
-            height: 100%;
-            background: $color-tertiary;
-            transition: transform 0.8s var(--ease-quart);
+            @include bp (md) {
+                content: "";
+                display: block;
+                position: absolute;
+                z-index: -1;
+                top: 0;
+                width: 25%;
+                height: 100%;
+                background: $color-tertiary;
+                transition: transform 0.8s var(--ease-quart);
+            }
         }
         &:before {
-            border-radius: var(--corners) 0 0 var(--corners);
-            left: 0;
-            transform: translate3d(calc(-1 * var(--margin-sides)), 0, 0);
+            @include bp (md) {
+                border-radius: var(--corners) 0 0 var(--corners);
+                left: 0;
+                transform: translate3d(calc(-1 * var(--margin-sides)), 0, 0);
+            }
         }
         &:after {
-            border-radius: 0 var(--corners) var(--corners) 0;
-            right: 0;
-            transform: translate3d(var(--margin-sides), 0, 0);
+            @include bp (md) {
+                border-radius: 0 var(--corners) var(--corners) 0;
+                right: 0;
+                transform: translate3d(var(--margin-sides), 0, 0);
+            }
         }
     }
 
@@ -254,6 +264,20 @@
 
         // Photo
         .photo {
+            position: relative;
+
+            a {
+                display: block;
+            }
+            figcaption {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+            }
+
             /**
              * Photo sizes
              */
@@ -330,7 +354,8 @@
                 transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
 
                 &--small {
-                    border-radius: 0;
+                    border-radius: 6px 6px 0 0;
+                    transform: translate3d(8%, 12%, 0) rotate(-3deg);
                 }
             }
 
@@ -338,7 +363,11 @@
             &:hover {
                 .postcard {
                     opacity: 1;
-                    transform: translate3d(3%,3%,0) rotate(2deg);
+                    transform: translate3d(3%, 3%, 0) rotate(2deg);
+
+                    &--small {
+                        transform: translate3d(0,0,0);
+                    }
                 }
             }
         }