.card {
  --_card_s: var(--card_s, 0px);
  --_card_gap: var(--card_gap, 0px);
  --_card_c: var(--card_c, var(--body_c));
  --_card_f-w: var(--card_f-w, normal);
  --_card_pb: var(--card_pb, var(--_card_s));
  --_card_pi: var(--card_pi, var(--_card_s));
  --_card_bg: var(--card_bg, var(--c-gray-ultralight));
  --_card_br: var(--card_br, var(--b-r));
  --_card_bw: var(--card_bw, var(--b-w));
  --_card_bc: var(--card_bc, var(--b-c));
  --_card_f-d: var(--card_f-d, column);

  --_card-cap_bg: var(
    --card-cap_bg,
    color-mix(in oklab, var(--_card_bg), black 20%)
  );
  --_card-cap_c: var(--card-cap_c, var(--_card_c));
  --_card-cap_pb: var(--card-cap_pb, var(--_card_s));
  --_card-cap_pi: var(--card-cap_pi, var(--_card_s));

  --_card-title_c: var(--card-title_c, var(--c-primary-700));
  --_card-subtitle_c: var(--_card-subtitle_c, var(--_card_c));
  --card-title-spacer-y: 0.5rem;

  --card-inner_br: 0px;
  --card-group-margin: 0.625rem;

  --_card-body_c: var(--card-body_c, var(--_card_c));
  --_card-body_s: var(--card-body_s, var(--_card_s));
  --_card-body_pb: var(--card-body_pb, var(--_card-body_s));
  --_card-body_pi: var(--card-body_pi, var(--_card-body_s));
  --_card-body_f-d: var(--card-body_f-d, column);
  --_card-body_gap: var(--card-body_gap, var(--_card_gap));

  --_card-title_m-b: var(--card-title_m-b, 0px);

  text-wrap: balance;
  position: relative;
  display: flex;
  overflow: hidden;

  font-weight: var(--_card_f-w);
  flex-direction: var(--_card_f-d);
  gap: var(--_card_gap);
  padding-block: var(--_card_pb);
  padding-inline: var(--_card_pi);
  color: var(--_card_c);
  border-radius: var(--_card_br);
  background-color: var(--_card_bg);
  border: var(--_card_bw) solid var(--_card_bc);
}

  .card .card-body {
    transition: all 0.4s ease;
    display: flex;
    flex-direction: var(--_card-body_f-d);
    gap: var(--_card-body_gap);
    padding-block: var(--_card-body_pb);
    padding-inline: var(--_card-body_pi);
    color: var(--_card-body_c);
  }

  .card > hr {
    margin-right: 0;
    margin-left: 0;
  }

  .card > .card-header + .list-group,
  .card > .list-group + .card-footer {
    border-top: 0;
  }

  .card:has(.stretched-link::after) {
    position: relative;
  }

  @media (min-width: 48rem) {

  .card {
    --_card_f-d: var(--card_f-d_mob, row)
}
  }

.card-title {
  color: var(--_card-title_c);
}

.card-subtitle {
  margin-top: calc(-0.5 * var(--card-title-spacer-y));
  margin-bottom: 0;
  color: var(--_card-subtitle_c);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
    -webkit-text-decoration: var(--link_d_h);
    text-decoration: var(--link_d_h);
  }

.card-link {

  margin-left: var(--card_pb);
}

/* Optional textual caps */

.card-header,
.card-footer {
  color: var(--_card-cap_c);
  background-color: var(--_card-cap_bg);
  padding-block: var(--_card-cap_pb);
  padding-inline: var(--_card-cap_pi);
}

.card-header {
  border-block-end: var(--_card_bw) solid var(--_card_bc);
  margin-block-end: 0;
}

.card-footer {
  border-block-start: var(--_card_bw) solid var(--_card_bc);
}

/* Header navs */
.card-header-tabs {
  margin-right: calc(-0.5 * var(--_card-cap_pi));
  margin-bottom: calc(-1 * var(--_card-cap_pb));
  margin-left: calc(-0.5 * var(--_card-cap_pi));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
    background-color: var(--_card_bg);
    border-bottom-color: var(--_card_bg);
  }

.card-header-pills {
  margin-right: calc(-0.5 * var(--_card-cap_pi));
  margin-left: calc(-0.5 * var(--_card-cap_pi));
}

/* Card image */
.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: var(--card-inner_br);
  border-top-right-radius: var(--card-inner_br);
}

/* Card groups */
.card-group > .card {
    margin-bottom: var(--card-group-margin);
  }
@media (min-width: 36rem) {
.card-group {
    display: flex;
    flex-flow: row wrap
}

    .card-group > .card {
      flex: 1 0 0%;
      margin-bottom: 0;
    }

      .card-group > .card + .card {
        margin-left: 0;
        border-left: 0;
      }
  }

.card-header {
  --_card-cap_bg: transparent;
  --_card-cap_pb: var(--_card_pb);
  --_card-cap_pi: var(--_card_pi) 0.375rem;
  --_card_bw: transparent;

  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: #666666;
}

.card-title {
  transition: all 0.4s ease;
}

.card-subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1rem;
}

.card-link {
  --link_c: var(--c-highlight);
  --btn-bg_h: transparent;
  --btn-fs: 0.75rem;
  --btn-c_h: var(--_card_bc);

  margin-top: auto;
  align-self: start;
}