card block small + date lang

assets/css/components/_card-block-small.scss

@@ -0,0 +1,153 @@
+.card--block-small {
+
+    border-bottom: var(--border-light);
+    padding: var(--padding-inner) 0;
+    padding-bottom: calc(var(--spacing)*0.75);
+
+    &:first-of-type {
+        border-top: var(--border-light);
+    }
+
+    @include grid-content();
+    @include hover-card-line();
+
+  
+    .group-top {
+        position: relative;
+        // top: -5px;
+    }
+
+    @include btn--go-to();
+
+    .btn--go-to {
+        top: calc(var(--padding-inner)*1);
+        bottom: auto;
+    }
+
+    .title {
+        grid-column: 2;
+              grid-row: 2;
+        font-size: var(--fs-normal);
+        line-height: var(--leading-title);
+        font-weight: 500;
+        text-transform: uppercase;
+        margin-right: 4ch;
+    }
+
+    .date {
+        font-size: var(--fs-small);
+        grid-column: 2;
+        grid-row: 1;
+        margin-top: 4px;
+    }
+
+    @media #{$small} {
+        display: block;
+        padding-bottom: calc(var(--spacing)*0.5);
+
+         .btn--go-to{
+            top: auto;
+            bottom: calc(var(--padding-inner)*1);
+         }
+
+        .group-top {
+            top: 0px;
+            margin-bottom: calc(var(--spacing)*0.5);
+        }
+
+        .title{
+            margin-bottom: calc(var(--spacing)*0.75);
+            margin-right: 1ch;
+        }
+
+        .date{
+            margin-top: 0px;
+        }
+
+    }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+.card--block-small {
+
+  .card--open-graph {
+        grid-column: 2;
+        z-index: 10;
+    }
+
+    .open-graph__details {
+        grid-column: 2;
+
+        summary,
+        .summary-inner {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            gap: 0.5ch;
+        }
+
+        .arrow-details {
+            line-height: 0;
+            --size: 11px;
+            height: var(--size);
+            width: var(--size);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            top: -2px;
+
+            svg {
+                transition: transform 0.2s ease-in;
+                width: 100%;
+                fill: var(--color-txt);
+            }
+
+        }
+
+        summary:hover {
+            color: var(--color-txt);
+
+            .arrow-details svg {
+                fill: var(--color-txt);
+            }
+        }
+
+        &[open] {
+            .arrow-details svg {
+                transform: rotate(90deg);
+            }
+        }
+
+        summary {
+            color: var(--color-txt-light);
+
+            .arrow-details svg {
+                fill: var(--color-txt-light);
+            }
+        }
+
+        @media #{$x-small} {
+            summary {
+                @include grid-content();
+                grid-row-gap: 0;
+
+                .summary-inner {
+                    grid-column: 2;
+                }
+            }
+
+            grid-column: 1/3;
+        }
+    }
+}