.listCard {
  display: flex;
  align-items: center;
  padding: var(--space-light-md);
  border-radius: 4px;
  border: 1px solid var(--color-neutral-weak-20);
  color: var(--color-text-base);
  transition: all 0.2s ease-in-out;

  &_info {
    display: flex;
    flex-direction: column;
    gap: var(--space-light-xs);
  }

  &_name {
    font-size: var(--font-size-xxl);
    line-height: var(--font-lineHeight-xs);
  }

  &_dueDate,
  &_category {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-base);
  }

  &_category {
    align-self: flex-start;
    padding: 0 var(--space-light-xs);
    border-radius: 4px;
    background-color: var(--color-neutral-weak-30);
  }

  &_stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-light-xs);
    margin-left: auto;
    padding-left: var(--space-light-md);
  }

  &_remainingAmount {
    font-size: var(--font-size-sm);
  }
}

@media #{$media-md-above} {
  .listCard {
    &:hover {
      box-shadow: 0px 2px 8px 0px var(--color-neutral-weak-30);
      transform: translateY(-4px);
    }
  }
}
