generic card-block

assets/css/components/_card-block.scss

@@ -1,4 +1,4 @@
-.card--impact {
+.card--block {
 
     container-type: inline-size;
     container-name: impact;
@@ -17,18 +17,49 @@
     @include figure-16-9();
     @include pin();
 
+
+
+    .group-top{
+        display: flex;
+        gap: calc(var(--padding-inner)*0.5);
+    }
+
+    .type{
+        height: calc(var(--h-block)*0.75);
+        border-radius: var(--radius-small);
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 1ch;
+        padding-top: 3px;
+
+        font-size: var(--fs-xsmall);
+        line-height: 1;
+        font-weight: 500;
+
+      
+        color: var(--color-txt-light);
+        border: 1px solid var(--color-txt-light);
+
+        overflow: hidden;
+        white-space: nowrap;
+
+    }
+
     .title{
         font-size: var(--fs-normal);
         font-weight: 500;
         text-transform: uppercase;
         line-height: var(--leading-title);
-        padding-top:  calc(var(--spacing)*0.5);
+        padding-top:  calc(var(--spacing)*0.75);
+         padding-bottom:  calc(var(--spacing)*1);
         margin-right: 2ch;
     }
 
     .date{
          font-size: var(--fs-small);
-         margin-top: calc(var(--spacing)*1.5);
+        //  margin-top: calc(var(--spacing)*1.5);
     }
 
     .investigations{
@@ -76,7 +107,7 @@
 
 
 @media #{$small-up}{
-.card--impact,
+.card--block,
 .grid-sizer{
     width: calc(50% - 13px);
 }