Introduce expandable image shortcode, improve portable links logic

assets/_shortcodes.scss

@@ -120,6 +120,7 @@
   .book-badge {
     display: inline-block;
     font-size: $font-size-14;
+    font-weight: $body-font-weight;
     vertical-align: middle;
     border-radius: $border-radius;
     overflow: hidden;
@@ -149,6 +150,8 @@
 
   // {{< steps >}}
   .book-steps {
+    position: relative;
+
     >ol {
       counter-reset: steps;
       list-style: none;
@@ -191,25 +194,25 @@
     }
   }
 
-  // {{< card >}}
-  .book-card {
-    display: block;
+  // {{< card >}}, {{< figure >}}
+  .book-card, figure {
+    display: inline-block;
     overflow: hidden;
     height: 100%;
     border-radius: $border-radius;
     border: $padding-1 solid var(--gray-200);
     
+    &[href], &[href]:visited {
+      color: var(--body-font-color);
+    }
     &[href]:hover {
       text-decoration: none;
       background: var(--gray-100);
     }
-    &[href]:visited {
-      color: var(--body-font-color);
-    }
 
     img {
+      width: 100%;
       display: block;
-      object-fit: contain;
       aspect-ratio: 4 / 3;
       object-fit: cover;
     }
@@ -217,6 +220,36 @@
     .markdown-inner {
       padding: $padding-16;
     }
+
+    figcaption {
+      @extend .markdown-inner;
+      padding: $padding-16;
+    }
+  }
+
+  .book-image {
+    input + img {
+      cursor: zoom-in;
+      transition: transform 0.2s ease-in-out;
+    }
+
+    input:checked + img {
+      position: fixed;
+
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      
+      background: var(--body-background);
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+      
+      z-index: 1;
+      cursor: zoom-out;
+      padding: $padding-16;
+    }
   }
 
   .book-hero {