.x-card-value {
  @extend .card,
          .overflow-hidden,
          .border-light,
          .shadow-sm;

  .x-icon-container {
    @extend .text-info-transparent,
            .position-absolute;
    font-size: 10rem;
    left: -3rem;
    opacity: 0.375;
  }

  .card-body {
    @extend  %text-right,
            %bg-light-transparent,
             %py-4,
             %px-3;

    h2 {
      @extend %text-primary,
              %mb-0;
    }
  }

  .card-text {
    @extend %font-size-sm,
            %text-grey;
  }

  @include x-hover-focus-active {
    .card-body {
      @extend %bg-white;
    }
  };
}