.m-card {
  --m-card-layout-direction: column;
  --m-card-spacing-y: var(--m-spacing-y-5);
  --m-card-spacing-x: 0;
  --m-card-cover-width: auto;
  --m-card-cover-background-enabled: transparent;
  --m-card-cover-align: center;
  --m-card-cover-spacing-x: 0;
  --m-card-cover-spacing-y: 0;
  --m-card-content-spacing-y: var(--m-spacing-y-6);
  --m-card-content-spacing-x-start: 0;
  --m-card-content-spacing-x-end: 0;
  --m-card-title-font-size: var(--m-typography-heading-4-font-size);
  --m-card-title-line-height: var(--m-typography-heading-4-line-height);
  --m-card-description-font-size: var(--m-typography-secondary-font-size);
  --m-card-description-line-height: var(--m-typography-secondary-line-height);

  position: relative;
  display: inline-grid;
  grid-template:
    "cover" auto
    "content" 1fr / auto;
  gap: var(--m-card-spacing-y) var(--m-card-spacing-x);
}

.m-card__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: var(--m-card-content-spacing-y);
  padding-inline: var(--m-card-content-spacing-x-start) var(--m-card-content-spacing-x-end);
}

.m-card__cover {
  grid-area: cover;
  flex-shrink: 0;
  height: fit-content;
  display: flex;
  justify-content: var(--m-card-cover-align);
  padding-inline: var(--m-card-cover-spacing-x);
  padding-block: var(--m-card-cover-spacing-y);
  background: var(--m-card-cover-background-enabled);
}

.m-card__title {
  font-size: var(--m-card-title-font-size);
  line-height: var(--m-card-title-line-height);
  margin: 0;
}

.m-card__description {
  font-size: var(--m-card-description-font-size);
  line-height: var(--m-card-description-line-height);
  margin: var(--m-card-description-spacing-y);
}

.m-card .stretched-link {
  /* Stretched link to take the whole card space */
  grid-area: 1 / 1 / -1 / -1;
}