[data-component="card"], .card {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid var(--_site-theme---card--border);
  border-radius: var(--card--border-radius);
  background-color: var(--_site-theme---card--background);
  color: var(--_site-theme---card--text);
  transition: background-color .3s cubic-bezier(.165, .84, .44, 1);

  &[data-variant="hoverable"]:hover {
    background-color: var(--_site-theme---card--hover-background);
    color: var(--_site-theme---card--hover-text);
  }

  &:has(> .u-link-cover:focus-visible) {
    outline: 2px solid var(--_site-theme---focus-outline);
    outline-offset: 2px;
  }

  > [data-slot="card"], > .slot.cc-card {
    flex: 1;
    align-items: stretch;

    > [data-wf--image--settings-aspect-ratio="background"] {
      z-index: 0;
    }

    > *:not([data-wf--image--settings-aspect-ratio="background"]) {
      z-index: 1;
    }
  }
}

[data-component="card-body"], .card-body {
  position: relative;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--card--padding);

  > [data-slot="card-body"], > .slot.cc-card-body {
    height: 100%;
  }
}