card open-graph

assets/css/components/_card-open-graph.scss

@@ -0,0 +1,66 @@
+.card--open-graph{
+
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    grid-gap: var(--padding-inner);
+
+
+    border: var(--border-light);
+    border-radius: var(--radius-small);
+    position: relative;
+
+    figure{
+        grid-column: 1;
+        grid-row: 1;
+
+    
+    }
+
+    @include figure-16-9();
+    
+
+    @media #{$x-small}{
+       figure{
+        height: 100%;
+        aspect-ratio: auto;
+       }
+    }
+
+    .content{
+        padding: var(--padding-inner);
+        padding-left: 0;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .site-name{
+        color: var(--color-txt-light);
+        font-size: var(--fs-small);
+    }
+
+    .title{
+        font-size: var(--fs-normal);
+        font-weight: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;    
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 0.5em;
+        a{ 
+            text-decoration: none;
+        }
+    }
+
+    .description{
+        font-size: var(--fs-small);
+        display: -webkit-box;
+        -webkit-line-clamp: 3;    
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    &:hover{
+        .title{ text-decoration: underline;}
+
+    }
+}