.x-firm-list {
  @extend %d-flex,
          %py-2,
          %flex-wrap;
          width: 100%;

  @include media-breakpoint-up(md) {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  > div {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    @include media-breakpoint-up(md) {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 50%;
    }
    @include media-breakpoint-up(lg) {
      width: 33.333333%;
    }
  }
}


.x-card-firm {
  @extend %x-card,
          %d-inline-flex,
          %mb-4,
          %cursor-pointer;

  &.active {
    @extend %x-card-hover-active-state;
  }

  &-details {
    display: flex;
    flex-direction: column;
    text-align: center;

    .x-title {
      @extend %pb-3;
      > * {
        @extend %font-weight-medium;
      }
    }

    .x-avatar-list {
      @extend %pb-3;
      width: 100%;
      justify-content: center;
    }
  }

  .x-card-prepend {
    @extend %x-flex-center,
            %mb-3,
            %pb-3,
            .border-bottom;

    figure {
      @extend %x-flex-center,
              %w-100,
              %py-3,
              %mb-0,
              %mt-0;
      img {
        @extend %h-auto,
                %w-auto;
                max-height: 2.688rem;
                max-width: 12rem;
      }
    }
  }
}


.x-card-firm-slim {
  @extend %x-card,
          %d-inline-flex,
          %flex-row,
          %mb-3,
          %align-items-stretch;

  .x-card-prepend {
    @extend %x-flex-center,
            %mr-3,
            %pr-3;
    border-right: 1px solid $border-color;
    max-width: 9rem;

    figure {
      @extend %x-flex-center,
              %w-100,
              %mb-0,
              %mt-0;
      img {
        @extend %h-auto,
                %w-auto;
                max-height: 3rem;
      }
    }
  }
}