@opensig/opendesign/es/card/style/index.css

.o-card {
  background-color: var(--card-bg-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  text-decoration: none;
}

.o-card-cover {
  flex-shrink: 0;
  padding: var(--card-cover-padding);
}

.o-card-cover-img {
  max-height: 100%;
  width: 100%;
  border-radius: var(--card-cover-radius);
}
.o-card-cover-img img {
  border-radius: var(--card-cover-radius);
}
.o-card-cover-img.is-full {
  height: 100%;
}

.o-card-icon {
  color: var(--card-icon-color);
  font-size: var(--card-icon-size);
  text-align: var(--card-icon-text-align);
}

.o-card-header {
  font-size: var(--card-header-text-size);
  line-height: var(--card-header-text-height);
  color: var(--card-header-color);
}

.o-card-header-with-icon {
  position: relative;
}
.o-card-header-with-icon .o-card-title {
  text-indent: calc(var(--card-title-icon-size) + var(--card-title-icon-gap));
}

.o-card-title-icon {
  width: var(--card-title-icon-size);
  height: var(--card-title-icon-size);
  position: absolute;
  top: calc((var(--card-header-text-height) - var(--card-title-icon-size)) / 2);
  font-size: var(--card-title-icon-size);
}

.o-card-title-icon-figure {
  width: 100%;
}

.o-card-title {
  height: calc(var(--card-title-row) * var(--card-header-text-height));
  margin: 0;
  font-weight: var(--card-header-text-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-title-text-align);
  word-break: var(--card-title-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-title-max-row);
  -webkit-box-orient: vertical;
}

.o-card-main {
  padding: var(--card-main-padding);
  height: 100%;
}

.o-card-main-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.o-card-content {
  font-size: var(--card-content-text-size);
  line-height: var(--card-content-text-height);
  color: var(--card-content-color);
}
.o-card-header + .o-card-content {
  margin-top: var(--card-content-gap);
}

.o-card-detail {
  height: calc(var(--card-detail-row) * var(--card-content-text-height));
  max-height: calc(var(--card-detail-max-row) * var(--card-content-text-height));
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: var(--card-detail-text-align);
  word-break: var(--card-detail-word-break);
  display: -webkit-box;
  -webkit-line-clamp: var(--card-detail-max-row);
  -webkit-box-orient: vertical;
}

.o-card-detail-limited {
  --card-detail-mask-bg-color: var(--o-grey-1);
  --card-detail-mask-width: 4em;
  position: relative;
  display: block;
  text-overflow: clip;
}
.o-card-detail-limited::after {
  background-image: linear-gradient(90deg, rgba(var(--card-detail-mask-bg-color), 0), rgba(var(--card-detail-mask-bg-color), 0.8) 66%, rgba(var(--card-detail-mask-bg-color)) 100%);
  bottom: 0;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  width: var(--card-detail-mask-width);
  height: var(--card-content-text-height);
}

.o-card-popover {
  word-wrap: break-word;
  max-width: var(--card-popover-width);
}

[data-o-theme*=dark] .o-card-detail-limited {
  --card-detail-mask-bg-color: var(--o-grey-4);
}

.o-card-hoverable {
  position: relative;
  transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
}
@media (hover: hover) {
  .o-card-hoverable:hover {
    box-shadow: var(--card-shadow-hover);
  }
}
.o-card-hoverable:active {
  box-shadow: var(--card-shadow-active);
}

@media (hover: hover) {
  .o-card-hoverable.o-card-cursor-pointer:hover .o-card-cover img {
    transform: scale(1.05);
  }
}
.o-card-hoverable.o-card-cursor-pointer:active .o-card-cover img {
  transform: scale(1.02);
}

.o-card-footer {
  margin-top: var(--card-footer-gap);
  font-size: var(--card-footer-text-size);
  line-height: var(--card-footer-text-height);
  color: var(--card-footer-color);
}

.o-card-layout-v {
  display: flex;
  flex-direction: column;
}
.o-card-layout-v .o-card-main {
  display: flex;
  flex-direction: column;
}
.o-card-layout-v .o-card-icon {
  margin-bottom: var(--card-icon-gap);
}

.o-card-layout-h {
  display: flex;
  flex-direction: row;
}
.o-card-layout-h .o-card-main {
  display: flex;
  flex-direction: row;
}
.o-card-layout-h .o-card-icon {
  margin-right: var(--card-icon-gap);
  width: var(--card-icon-size);
}

.o-card-layout-hr {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.o-card-layout-hr .o-card-main {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.o-card-layout-hr .o-card-icon {
  margin-left: var(--card-icon-gap);
  width: var(--card-icon-size);
}

.o-card-cover-h,
.o-card-cover-hr {
  width: var(--card-h-cover-width);
  max-width: var(--card-h-cover-max-width);
  display: flex;
  align-items: center;
}

.o-card-cursor-pointer {
  cursor: pointer;
}

.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-header-text-weight: 600;
  --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.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;
}

.o-card-popover {
  --card-popover-width: auto;
}

@media (min-width: 1201px) and (max-width: 1680px) {
  .o-card:not(.o-card-no-responsive) {
    --card-radius: var(--o-radius_control-m);
    --card-cover-radius: var(--o-radius_control-s);
    --card-header-text-size: var(--o-font_size-text2);
    --card-header-text-height: var(--o-line_height-text2);
    --card-main-padding-v: 16px;
    --card-main-padding-h: 24px;
    --card-icon-gap: 12px;
    --card-title-icon-gap: var(--o-gap-2);
    --card-content-gap: 8px;
    --card-content-text-size: var(--o-font_size-tip1);
    --card-content-text-height: var(--o-line_height-tip1);
    --card-footer-gap: 16px;
    --card-footer-text-size: var(--o-font_size-tip2);
    --card-footer-text-height: var(--o-line_height-tip2);
  }
  .o-card:not(.o-card-no-responsive).o-card-cover {
    --card-main-padding-h: 16px;
  }
}
@media (min-width: 841px) and (max-width: 1200px) {
  .o-card:not(.o-card-no-responsive) {
    --card-radius: var(--o-radius_control-s);
    --card-cover-radius: var(--o-radius_control-xs);
    --card-header-text-size: var(--o-font_size-text1);
    --card-header-text-height: var(--o-line_height-text1);
    --card-main-padding-v: 12px;
    --card-main-padding-h: 16px;
    --card-icon-gap: 8px;
    --card-icon-size: var(--o-icon_size-xl);
    --card-title-icon-gap: var(--o-gap-2);
    --card-title-icon-size: var(--o-icon_size-m);
    --card-content-gap: 8px;
    --card-content-text-size: var(--o-font_size-tip1);
    --card-content-text-height: var(--o-line_height-tip1);
    --card-footer-gap: 12px;
    --card-footer-text-size: var(--o-font_size-tip2);
    --card-footer-text-height: var(--o-line_height-tip2);
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-v {
    --card-cover-padding: 4px 4px 0;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-h {
    --card-cover-padding: 4px 0 4px 4px;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-hr {
    --card-cover-padding: 4px 4px 4px 0;
  }
  .o-card:not(.o-card-no-responsive).o-card-cover {
    --card-main-padding-h: 12px;
  }
}
@media (max-width: 840px) {
  .o-card:not(.o-card-no-responsive) {
    --card-radius: var(--o-radius_control-s);
    --card-cover-radius: var(--o-radius_control-xs);
    --card-main-padding-v: 8px;
    --card-main-padding-h: 12px;
    --card-header-text-size: var(--o-font_size-tip1);
    --card-header-text-height: var(--o-line_height-tip1);
    --card-icon-gap: 8px;
    --card-icon-size: var(--o-icon_size_control-l);
    --card-title-icon-gap: var(--o-gap-2);
    --card-title-icon-size: var(--o-icon_size-m);
    --card-content-gap: 8px;
    --card-content-text-size: var(--o-font_size-tip2);
    --card-content-text-height: var(--o-line_height-tip2);
    --card-footer-gap: 8px;
    --card-footer-text-size: 10px;
    --card-footer-text-height: 16px;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-v {
    --card-cover-padding: 4px 4px 0;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-h {
    --card-cover-padding: 4px 0 4px 4px;
  }
  .o-card:not(.o-card-no-responsive) .o-card-cover-hr {
    --card-cover-padding: 4px 4px 4px 0;
  }
  .o-card:not(.o-card-no-responsive).o-card-cover {
    --card-main-padding-h: 8px;
  }
}