.x-card-info {
  @extend .d-flex,
          .py-2,
          .py-md-3,
          .py-xl-4,
          .px-2,
          .px-md-3,
          .px-xl-4;

  .x-card-thumbnail {
    width: 3rem;

    @include media-breakpoint-up(md) {
      width: 4rem;
    }

    @include media-breakpoint-up(lg) {
      width: 4.5rem;
    }
  }
}

.x-card-info-content {
  @extend .px-3,
          .py-2,
          .flex-1;
  h6 {
    @extend .text-primary-darker;
    .x-card-info-primary & { @extend .text-success; }
    .x-card-info-secondary & { @extend .text-primary-darker; }
    .x-card-info-tertiary & { @extend .text-helper-default; }
  }

  p {
    @extend .text-grey,
            .mb-0;
  }
}