generic card-block

assets/css/style.css

@@ -1679,7 +1679,7 @@ button.sort[data-sort-type=up] .arrow {
   }
 }
 
-.card--impact {
+.card--block {
   container-type: inline-size;
   container-name: impact;
   border: var(--border-light);
@@ -1692,13 +1692,13 @@ button.sort[data-sort-type=up] .arrow {
   gap: calc(var(--spacing) * 0.25);
   border-bottom: var(--border-light);
 }
-.card--impact:first-of-type {
+.card--block:first-of-type {
   border-top: var(--border-light);
 }
-.card--impact {
+.card--block {
   position: relative;
 }
-.card--impact::before {
+.card--block::before {
   content: "";
   width: 100%;
   border-top: 1px solid transparent;
@@ -1706,85 +1706,105 @@ button.sort[data-sort-type=up] .arrow {
   top: -1px;
   left: 0;
 }
-.card--impact:hover {
+.card--block:hover {
   background-color: var(--grey-950);
   border-color: var(--color-txt);
 }
-.card--impact:hover::before {
+.card--block:hover::before {
   border-color: var(--color-txt);
 }
-.card--impact > picture, .card--impact > figure {
+.card--block > picture, .card--block > figure {
   aspect-ratio: 16/9;
   display: flex;
   overflow: hidden;
 }
-.card--impact > picture img, .card--impact > figure img {
+.card--block > picture img, .card--block > figure img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
   transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
 }
-.card--impact .pin {
+.card--block .pin {
   z-index: 90;
   width: 18px;
   height: 18px;
   transform: rotate(45deg);
   transform-origin: center;
 }
-.card--impact .pin svg {
+.card--block .pin svg {
   width: 100%;
   height: 100%;
   fill: var(--color-txt);
 }
-.card--impact .title {
+.card--block .group-top {
+  display: flex;
+  gap: calc(var(--padding-inner) * 0.5);
+}
+.card--block .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;
+}
+.card--block .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;
 }
-.card--impact .date {
+.card--block .date {
   font-size: var(--fs-small);
-  margin-top: calc(var(--spacing) * 1.5);
 }
-.card--impact .investigations {
+.card--block .investigations {
   text-decoration: none;
   list-style: none;
 }
-.card--impact .investigations li {
+.card--block .investigations li {
   font-size: var(--fs-small);
   color: var(--color-txt-light);
 }
-.card--impact .investigations li a {
+.card--block .investigations li a {
   text-decoration: none;
 }
-.card--impact .investigations li a::before {
+.card--block .investigations li a::before {
   content: "↪ ";
 }
-.card--impact .card--open-graph {
+.card--block .card--open-graph {
   width: 100%;
   margin: calc(var(--spacing) * 0.5) 0;
 }
-.card--impact .pin {
+.card--block .pin {
   position: absolute;
   top: var(--padding-inner);
   right: var(--padding-inner);
 }
-.card--impact > figure {
+.card--block > figure {
   width: calc(100% + var(--padding-inner) * 2);
   position: relative;
   left: calc(var(--padding-inner) * -1);
   top: calc(var(--padding-inner) * -1);
 }
-.card--impact .tag {
+.card--block .tag {
   position: relative;
   top: 3px;
 }
 
 @media screen and (min-width: 768px) {
-  .card--impact,
+  .card--block,
   .grid-sizer {
     width: calc(50% - 13px);
   }
@@ -2823,7 +2843,7 @@ main .page__header .description {
 }
 @media screen and (max-width: 768px) {
   .section--home .card--article,
-  .section--home .card--impact {
+  .section--home .card--block {
     margin-bottom: calc(var(--spacing) * 1);
   }
   .section--home .baseline-section {