.card {
  --surface: var(--white);
  --icon-size: 44px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 36px);
  color: var(--text-body);
  &:not(.outline) { background: var(--surface); }
  > .rte {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    > :last-child { margin-bottom: 0; }
  }
  h3 { margin-bottom: 0.5em; color: var(--heading); }
  :is(h3, p) { text-wrap: balance; }
  h4 { margin-bottom: 0.4em; color: var(--heading); font-size: 1.125rem; }
  p { margin-bottom: 1em; }
  a { color: var(--prime); font-weight: 600; }
  a:hover { color: var(--second); }
  .rte > p:last-child:has(> a.link-arrow) { margin-top: auto; margin-bottom: 0; }
}
.rte > p:has(> .card__icon) {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  line-height: 0;
}
.card__icon {
  display: inline-block;
  width: var(--icon-size, 44px);
  font-size: var(--icon-size, 44px);
  line-height: 1;
  color: var(--prime);
}
svg.card__icon { width: auto; height: var(--icon-size, 44px); }
.icon-mask {
  height: var(--icon-size, 44px);
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}
.card--sm {
  --icon-size: 32px;
  padding: clamp(18px, 1.8vw, 26px);
  h3 { font-size: 1.125rem; }
}
.card--text-sm { font-size: 0.90625rem; }
.card--lg h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; }
.card--soft       { --surface: var(--surface-soft); }
.card--accent     { --surface: var(--accent); }
.card--prime      { --surface: var(--prime); }
.card--prime-deep { --surface: var(--prime-deep); }
:is(.card--prime, .card--prime-deep) {
  color: var(--text-on-dark-dim);
  :is(h3, h4) { color: var(--text-on-dark); }
  a { color: var(--text-on-dark); }
  a:hover { color: var(--accent); }
  .card__icon { color: var(--text-on-dark-dim); }
}
.card--row > .rte {
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(16px, 1.6vw, 24px);
  > p:has(> .card__icon) { flex: none; margin: 0; }
  > div { flex: 1; }
  > div > :last-child, > p:last-child { margin-bottom: 0; }
}
.card--row { container-type: inline-size; }
@container (max-width: 379px) {
  .card--row > .rte { flex-direction: column; gap: 12px; }
}
.card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-24);
  > .card { flex: 1; }
}
.card.card--photo {
  display: flex;
  position: relative;
  justify-content: flex-end;
  min-height: clamp(360px, 34vw, 490px);
  color: var(--text-on-dark-dim);
  isolation: isolate;
  :is(h3, h4, a) { color: var(--text-on-dark); }
  > figure {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
    img { width: 100%; height: 100%; object-fit: cover; }
  }
  &::before {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--prime-deep) 92%, transparent) 55%);
  }
  > .rte { flex: 0 0 auto; }
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-24);
  span {
    padding: 9px 18px;
    border: 1.5px solid currentColor;
    font-size: 0.8125rem;
    font-weight: 600;
  }
}
.card-points { margin-top: var(--space-24); }
.card-points strong { font-weight: 700; }
.card a.card-title-link,
.card a.card-icon-link { color: inherit; text-decoration: none; border-bottom: 0; }
.card a.card-title-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.band > .card { max-width: calc(min(100vw, var(--container-max)) - 2 * var(--page-gutter)); }