.card {
  --background-color: initial;
  --border-width: 1px;
  --border-color: var(--gray-3);
  --color: inherit;
  --padding: var(--size-fluid-2);
  --shadow: var(--shadow-1);

  border-radius: var(--radius-2);
  background: var(--background-color);
  padding: var(--padding);
  border: var(--border-width) solid var(--border-color);
  color: var(--color);
  box-shadow: var(--shadow);

  @media (--motionOK) {
    animation: var(--animation-fade-in);
  }
}

.page {
  --background-color: white;
}

@media (max-width: 768px) {
  .page {
    --background-color: initial;
    --color: inherit;
    --padding: 0;
    --shadow: none;
    border: none;
  }
}

.alert {
  --background-color: var(--red-1);
  --border-color: transparent;
  --color: var(--red-9);
  --padding: var(--size-fluid-1);
  --shadow: none;
}

.notice {
  --background-color: var(--green-1);
  --border-color: transparent;
  --color: var(--green-9);
  --padding: var(--size-fluid-1);
  --shadow: none;
}

.card footer {
  padding: var(--size-fluid-1);
  background-color: var(--surface-2);
  border-radius: var(--radius-2);
}

.card:has(.background) {
  position: relative;
  background-size: cover;
  background-position: center;
}

.card .background {
  border-radius: var(--radius-2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
  z-index: 0;
}

.no-shadow {
  --shadow: none;
}

.card .card {
  --padding: var(--size-fluid-1);
  --shadow: none;
}

.card .card:has(.item:not(.ts-control *)) {
  --padding: 0;
}

.card.bottom-right {
  --background-color: var(--surface-1);
  z-index: 20;
  position: fixed;
  right: var(--size-2);
  bottom: var(--size-2);
}

.card.postit {
  --background-color: var(--yellow-1);
  --border-color: var(--yellow-4);
}