card open-graph

assets/css/components/_card-small.scss

@@ -0,0 +1,67 @@
+
+
+.card--small{
+    display: grid;
+    grid-gap: var(--padding-inner);
+    grid-template-columns: 2fr 3fr;
+    margin-bottom: var(--spacing);
+    position: relative;
+
+    @include figure-16-9();
+  
+    .content{
+        display: flex;
+        flex-direction: column;
+        padding-top: calc(var(--spacing)*0.25);
+
+    }
+
+    .title{
+        font-weight: normal;
+        font-size: var(--fs-medium);
+        margin-bottom: 0.25em;  
+        a{ text-decoration: none;}
+        
+    }
+
+    time{
+        flex-grow: 1;
+        color: var(--color-txt-light);
+    }
+    .keywords{
+            margin-top: 1.5em;
+            padding-bottom: calc(var(--spacing)*0.25);
+            color: var(--color-txt-light);
+    }
+
+    &:hover{
+        .title{ text-decoration: underline;}
+    }
+
+    @media #{$medium}{
+        .title{
+            font-size: var(--fs-normal);
+            margin-bottom: 0;
+        }
+    }
+
+    @media #{$x-small}{
+        .content{
+            padding: 0;
+        }
+        .title{
+            margin-bottom: 0;
+        }
+        time{
+            font-size: var(--fs-small);
+            margin-top: 0.25em;
+        }
+        .keywords{
+            margin-top: 0.5em;
+            padding-bottom: 0;
+        }
+    }
+
+    
+
+}