index-main/assets/css/components/_card-package.scss

.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;
    }
  }
}