feat(shortcodes): external card link (youtube)

assets/sass/card.scss

@@ -1,6 +1,49 @@
 .card {
-    padding: 1rem;
+    padding: 0.5rem;
     border: 1px solid gray;
     border-radius: 2px;
     background-color: #ecf0f1;
+    display: flex; 
+    gap: 2rem;
+
+    .card-image {
+        display: block;
+        margin-right: 0rem;
+        overflow: hidden;
+        height: 100%;
+        width: 300px;
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    .card-action {
+        text-decoration: underline;
+    }
+
+    color: black;
+    text-decoration: none;
 }
+
+@media (max-width: $sm-breakpoint) {
+    .card-link {
+        gap: 1rem;
+    }
+}
+
+@media (max-width: $md-breakpoint) {
+    .card-link {
+        .card-image {
+            width: 200px;
+            height: 100%;
+        }
+    }
+}
+
+@media (max-width: $xs-breakpoint) {
+    .card-link {
+        .card-image {
+            width: 100% !important;
+        }
+    }
+}
+

assets/sass/figures.scss

@@ -1,5 +1,6 @@
 .fig-img {
     display: inline-block;
+    text-align: center;
     figcaption {
         font-size: .9rem;
         color: $hidden;
@@ -20,6 +21,7 @@
     justify-content: center;
     flex-wrap: wrap;
     gap: 2rem;
+    padding-top: 1rem;
     margin-bottom: 1rem;
     
     figure {

assets/sass/main.scss

@@ -46,3 +46,10 @@ $hidden: #2C3E50;
 @import 'sliding_gallery.scss';
 @import 'alert.scss';
 
+.small-icon {
+    width: 20px;
+    height: 20px;
+}
+.youtube-icon {
+    fill: #FF0202;
+}