.card {
  background-color: var(--mantine-color-body);
  width: 220px;

  @mixin hover {
    box-shadow: var(--mantine-shadow-xs);
    transform: scale(1.02);
  }

  &:focus-visible {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: 2px;
  }
}

.cardSection {
  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
}

.title {
  font-family:
          Greycliff CF,
          var(--mantine-font-family);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}