@layer components {
  .card {
    background-color: var(--color-surface);
    border-radius: var(--rounded-xl);
    border-width: var(--border);
    box-shadow: var(--shadow-sm);
    padding: var(--size-6);
  }

  .card-interactive {
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s var(--ease-2), border-color 0.2s var(--ease-2);
  }

  .card-interactive:hover {
    border-color: var(--color-border-dark);
    box-shadow: var(--shadow-md);
  }

  .card-compact {
    padding: var(--size-4);
  }

  @media (width >= 40rem) {
    .card-compact {
      padding: var(--size-6);
    }
  }

  .summary-strip {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-lg);
    display: grid;
    overflow: hidden;

    @media (width >= 40rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .summary-strip__item {
    color: var(--color-text);
    display: grid;
    gap: var(--size-1);
    padding: var(--size-4);
    text-decoration: none;

    & + & {
      border-block-start: 1px solid var(--color-border);
    }

    &:hover {
      background-color: rgb(from var(--color-border-light) r g b / .5);
    }

    @media (width >= 40rem) {
      & + & {
        border-block-start: 0;
        border-inline-start: 1px solid var(--color-border);
      }
    }
  }
}