.card {
  --borderRadius: var(--borderRadius--none);

  overflow: hidden;
  border-radius: var(--borderRadius);

  h2.card__title {
    margin: 0;
  }

  /**
    * Clear the line after the title
  */
  h2::after {
    content: '';

    clear: both;
    display: block;

    height: 0;

    visibility: hidden;
  }

  .card__header {
    padding: var(--padding--sm);
    background-color: rgb(var(--background--neutral-low-default--light));
    border-radius: var(--borderRadius);
  }

  .card__content {
    padding: var(--padding--lg);
    color: rgb(var(--foreground--neutral-full-default--light));
  }

  .card__footer {
    margin-inline: var(--margin--lg);
    padding-block: var(--padding--sm);
    border-top: 1px solid rgb(var(--border--neutral-low-default--light));
  }
}

.card--bordered {
  border: solid 1px rgb(var(--border--neutral-low-default--light));

  .card__header {
    border-bottom-right-radius: var(--borderRadius--none);
    border-bottom-left-radius: var(--borderRadius--none);
  }
}