investigation-summary : clean blueprint

assets/css/components/_card-package.scss

@@ -0,0 +1,145 @@
+.card--package {
+  position: relative;
+  max-width: var(--max-w-cards);
+  border: var(--border-light);
+  padding: var(--padding-inner);
+  @include grid-content();
+  @include figure-16-9();
+
+  container-type: inline-size;
+  container-name: cardpackage;
+
+  figure {
+    border-radius: var(--radius-small);
+    background-color: var(--color-accent);
+
+    img {
+      opacity: 0.8;
+      filter: grayscale(1);
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--fs-small);
+  }
+
+  .title {
+    font-weight: 500;
+    font-size: var(--fs-normal);
+    line-height: var(--leading-title);
+
+    margin-bottom: 0.75em;
+    text-wrap: balance;
+    max-width: 42ch;
+    text-transform: uppercase;
+    padding-top: calc(var(--spacing) * 0.25);
+    a {
+      text-decoration: none;
+    }
+
+    @media #{$small} {
+      font-size: var(--fs-normal);
+    }
+
+    .icon {
+      padding-right: 1ch;
+      position: relative;
+      top: 1px;
+      svg {
+        height: 15px;
+        width: 15px;
+        fill: var(--color-txt);
+      }
+    }
+  }
+
+  .short {
+    @include clamp(3);
+    flex-grow: 1;
+    padding-right: calc(var(--padding-inner) * 2);
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+    gap: 1ch;
+    color: var(--color-txt-light);
+    padding-top: calc(var(--spacing) * 0.5);
+
+    li + li {
+      &::before {
+        content: "|";
+        padding-right: 1ch;
+      }
+    }
+    @media #{$small} {
+      font-size: var(--fs-small);
+    }
+  }
+
+  .btn--go-to {
+    position: absolute;
+    right: calc(var(--padding-inner) * 1);
+    bottom: var(--padding-inner);
+  }
+
+  @include btn--go-to();
+
+  &:hover {
+    background-color: var(--grey-950);
+    border-color: var(--color-txt);
+  }
+}
+
+[data-template="investigation-summary"] .card--package {
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
+  border-bottom: var(--border-light);
+
+  &:first-of-type {
+    border-top: var(--border-light);
+  }
+  &.has-link {
+    @include hover-card-line();
+  }
+
+  figure {
+    @media #{$x-small} {
+      margin-left: 0px;
+    }
+  }
+
+  .title {
+    font-size: var(--fs-small);
+  }
+}
+
+@media #{$x-small} {
+  .card--package {
+    .content {
+      display: contents;
+    }
+    figure {
+      grid-row: 1/3;
+    }
+
+    .title {
+      font-size: var(--fs-small);
+      padding-top: calc(var(--spacing) * 0.25);
+      margin-bottom: 0;
+    }
+
+    .short {
+      grid-column: span 2;
+    }
+
+    ul {
+      grid-column: 2;
+      grid-row: 2;
+      padding-top: 0;
+    }
+  }
+}