.o-card {
  --card-bg-color: var(--o-color-fill2);
  --card-radius: var(--o-radius_control-l);

  --card-shadow: none;
  --card-shadow-hover: var(--o-shadow-2);
  --card-shadow-active: var(--o-shadow-1);

  --card-cover-radius: var(--o-radius_control-s);

  --card-h-cover-width: 45%;
  --card-h-cover-max-width: 320px;

  --card-main-padding-v: 24px;
  --card-main-padding-h: 32px;
  --card-main-padding: var(--card-main-padding-v) var(--card-main-padding-h);

  --card-icon-gap: 16px;
  --card-icon-color: var(--o-color-info1);
  --card-icon-size: var(--o-icon_size-2xl);

  --card-title-icon-gap: var(--o-gap-3);
  --card-title-icon-color: var(--o-color-info1);
  --card-title-icon-size: var(--o-icon_size-l);

  --card-header-color: var(--o-color-info1);
  --card-header-text-size: var(--o-font_size-h3);
  --card-header-text-height: var(--o-line_height-h3);

  --card-title-word-break: break-word;

  --card-content-gap: 12px;
  --card-content-color: var(--o-color-info2);
  --card-content-text-size: var(--o-font_size-text1);
  --card-content-text-height: var(--o-line_height-text1);

  --card-detail-word-break: break-word;

  --card-footer-gap: 24px;
  --card-footer-color: var(--o-color-info2);
  --card-footer-text-size: var(--o-font_size-tip1);
  --card-footer-text-height: var(--o-line_height-tip1);

  &.o-card-cover {
    --card-main-padding-h: 24px;
  }
}

.o-card-cover-v {
  --card-cover-padding: 8px 8px 0;
}

.o-card-cover-h {
  --card-cover-padding: 8px 0 8px 8px;
}

.o-card-cover-hr {
  --card-cover-padding: 8px 8px 8px 0;
}

.o-card-only-cover {
  --card-cover-padding: 0;
}