@define refs {
  name: card;
}

@define props {
  rdBox: 0.25rem;
  bodyPadding: 1rem;
}

@alga {refs.name} {
  .{refs.name} {
    ref: display-flex flexDirection-column;
  }
    
  .{refs.name}, .box {
    ref: width-100pct backgroundColor-hexfff backgroundClip-borderBox border-1px_solid_hexd9d9d9;
    ref-borderRadius: {props.rdBox};
    ref: wordWrap-breakWord;
    prefers-dark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toDark: backgroundColor-hex2f2f2f borderColor-hex5f5f5f;
    prefers-toLight: backgroundColor-hexfff borderColor-hexd9d9d9;
    print: border-none;
  }
    
  .{refs.name} > *:first-child {
    ref-borderTopRightRadius: {props.rdBox};
    ref-borderTopLeftRadius: {props.rdBox};
  }
    
  .{refs.name} > *:last-child {
    ref-borderBottomRightRadius: {props.rdBox};
    ref-borderBottomLeftRadius: {props.rdBox};
  }
    
  .{refs.name}Header, .{refs.name}Footer {
    ref: display-flex justifyContent-spaceBetween alignItems-center padding-0.75rem_1rem;
    print: display-none;
  }
    
  .{refs.name}Header {
    ref: borderBottom-1px_solid_hexd9d9d9;
    prefers-dark: borderBottomColor-hex5f5f5f;
    prefers-toDark: borderBottomColor-hex5f5f5f;
    prefers-toLight: borderBottomColor-hexd9d9d9;
  }
    
  .{refs.name}Footer {
    ref: borderTop-1px_solid_hexd9d9d9;
    prefers-dark: borderTopColor-hex5f5f5f;
    prefers-toDark: borderTopColor-hex5f5f5f;
    prefers-toLight: borderTopColor-hexd9d9d9;
  }
    
  .{refs.name}Body {
    ref: flex-1_1_auto;
  }
    
  .box, .{refs.name}Body {
    ref-padding: {props.bodyPadding};
  }
    
  .{refs.name}Image {
    ref: width-100pct;
  }
}