.card {
  position: relative;
  background: var(--c-surface-bg);
  font-size: var(--font-size-base);
  border-radius: 0.25rem;
  overflow: hidden;
  border: 0.0625rem solid var(--c-border);
}

.card:focus-within {
  box-shadow: 0 0.5rem 1rem 0 var(--c-shadow);
}

.card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.5rem;
  border-bottom: 0.125rem solid var(--c-border);
  box-shadow: 0.125rem 0 0.25rem var(--c-shadow);
  min-height: 3rem;
  align-items: center;
}

.card-title {
  flex: 1;
}

.card-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}