.card {
  --card-overflow: hidden;
  --card-bg-light-bg: var(--theme-bg-1);
  --card-outline-border-width: 1px;
  --card-outline-border-color: var(--theme-bd-1);
  --card-floating-shadow-size: 0 1px 3px 0;
  --card-floating-shadow-color: var(--theme-shadow);
  --card-floating-shadow-color-alpha: 24%;
  --card-floating-link-hover-shadow-size: 0 4px 12px 0;
  --card-link-transition: ease-out 0.12s;
  --card-link-hover-bg: var(--theme-bg-2);
  --card-zoom-transform: scale(1.025);
  --card-zoom-transition: ease-out 0.12s;
}

.card {
  --card-floating-shadow-color-mix: color-mix(
    in srgb,
    var(--card-floating-shadow-color) var(--card-floating-shadow-color-alpha),
    transparent calc(100% - var(--card-floating-shadow-color-alpha))
  );
}

.card {
  position: relative;
  display: block;
  overflow: var(--card-overflow);
}

.card.is-bg-1 {
  background: var(--theme-bg-1);
}

.card.is-bg-2 {
  background: var(--theme-bg-2);
}

.card.is-bg-3 {
  background: var(--theme-bg-3);
}

.card:is(.is-bg, .is-bg-light) {
  background: var(--card-bg-light-bg);
}

.card.is-outline {
  border-width: var(--card-outline-border-width);
  border-color: var(--card-outline-border-color);
}

.card.is-floating {
  box-shadow: var(--card-floating-shadow-size)
    var(--card-floating-shadow-color-mix);
}

@media (hover: hover) and (pointer: fine) {
  .card.is-floating:where(.is-link):hover {
    box-shadow: var(--card-floating-link-hover-shadow-size)
      var(--card-floating-shadow-color-mix);
  }
}

.card.is-link {
  cursor: pointer;
  transition: var(--card-link-transition);
}

@media (hover: hover) and (pointer: fine) {
  .card.is-link:hover {
    background: var(--card-link-hover-bg);
  }
}

.card.is-zoom {
  transition: var(--card-zoom-transition);
}

@media (hover: hover) and (pointer: fine) {
  .card.is-zoom:hover {
    transform: var(--card-zoom-transform);
  }
}

.card:is([disabled], [aria-disabled="true"], .is-disabled) {
  pointer-events: none;
}