Add portable links support to Card shortcode

assets/_shortcodes.scss

@@ -202,15 +202,20 @@
     border-radius: $border-radius;
     border: $padding-1 solid var(--gray-200);
     
-    &[href], &[href]:visited {
+    > a {
-      color: var(--body-font-color);
+      display: block;
-    }
+      height: 100%;
-    &[href]:hover {
+
-      text-decoration: none;
+      &[href], &[href]:visited {
-      background: var(--gray-100);
+        color: var(--body-font-color);
+      }
+      &[href]:hover {
+        text-decoration: none;
+        background: var(--gray-100);
+      }
     }
     
-    > img {
+    > a > img, > img {
       width: 100%;
       display: block;
       aspect-ratio: 4 / 3;
@@ -222,6 +227,7 @@
     }
   }
 
+  // {{< image >}}
   .book-image {
     input + img {
       cursor: zoom-in;

exampleSite/content.en/docs/shortcodes/experimental/cards.md

@@ -17,7 +17,7 @@
 {{% /columns %}}
 
 {{% columns %}}
-- {{< card href="/docs/shortcodes/cards" >}}
+- {{< card href="/docs/shortcodes/experimental/cards" >}}
   **Markdown**  
   Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa.
   {{< /card >}}

layouts/_shortcodes/card.html

@@ -1,5 +1,6 @@
 {{- with .Get "href" -}}
-<div><a class="book-card{{ with $.Get "class" }} {{ . }}{{ end }}" href="{{ . | safeURL }}">
+{{- $destination := partial "docs/links/portable-link" (dict "Page" $.Page "Destination" .) -}}
+<div class="book-card{{ with $.Get "class" }} {{ . }}{{ end }}"><a href="{{ $destination | safeURL }}">
 {{- template "book-card-content" $ -}}
 </a></div>
 {{- else -}}