@layer components {
  .rs-card {
    display: block;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    background: var(--rs-color-background-elevation-base);
    color: var(--rs-color-foreground-neutral);
    overflow: clip;
    transition:
      border-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-card[data-elevated] {
    background: var(--rs-color-background-elevation-raised);
    box-shadow: var(--rs-shadow-raised);
  }

  .rs-card:is(a, button),
  a.rs-card {
    text-align: start;
    text-decoration: none;
  }

  .rs-card:is(a, button):focus-visible,
  a.rs-card:focus-visible {
    outline: 0;
    box-shadow: var(--rs-shadow-focus);
  }

  @media (hover: hover) and (pointer: fine) {
    .rs-card:is(a, button):hover,
    a.rs-card:hover {
      border-color: var(--rs-color-border-primary-faded);
    }
  }

  .rs-card__body {
    padding: var(--rs-unit-x4);
  }
}