@appearhere/bloom/components/Cards/EditorialCard/EditorialCard.css

Appear Here's pattern library and styleguide

.root {
  display: inline-block;
  width: 100%;
  border: 1px solid var(--color-greyLighter);
  color: var(--color-greyDark);
}

.root:hover {
  color: var(--color-greyDark);
}

.body {
  margin-top: var(--size-medium);
}

.imageContainer,
.content {
  display: inline-block;
  vertical-align: top;
}

.imageContainer {
  width: 44%;
}

.content {
  width: 56%;
  padding: var(--size-medium);
}

.image {
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

.title {
  composes: fontRegular from '../../../globals/typography.css';
  font-weight: var(--fontweight-demi);
  display: block;
}

.body {
  composes: fontSmallI from '../../../globals/typography.css';
  color: var(--color-grey);
  display: block;
}

.large .imageContainer {
  width: 40%;
}

.large .content {
  width: 60%;
  padding: var(--size-medium);
}

.large .title {
  font: var(--font-large-i);
  font-size: var(--fontsize-large-i);
  line-height: var(--lineheight-large-i);
  letter-spacing: var(--letter-spacing-large-i);
  font-weight: var(--fontweight-demi);
}