.l-card {
  --nt-background-color: #ffffff;
  --nt-text-color: #333;
  border-radius: 4px;
  border: 1px solid var(--l-border-color);
  background-color: var(--nt-background-color);
  color: var(--nt-text-color);
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.l-card__header {
  border-bottom: 1px solid var(--l-border-color);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.l-card__footer {
  border-top: 1px solid var(--l-border-color);
  box-sizing: border-box;
}
.l-card__header,
.l-card__body,
.l-card__footer {
  padding: 15px;
}
.l-header-extra:empty {
  display: none;
}
html.dark .l-card {
  --nt-background-color: #232324;
  --nt-text-color: rgba(255, 255, 255, 0.7);
  --l-border-color: rgb(72, 72, 73);
}