////////// Customer Solution Cards //////////

.grid-card-customer-solutions {
  display: grid;
  gap: $grid-gutter-width;
  grid-template-columns: 1fr;
  @include media-breakpoint-up(md, $ds-breakpoints) {
    grid-template-columns: 1fr 1fr;
  }
  @include media-breakpoint-up(lg, $ds-breakpoints) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  @include media-breakpoint-up(2xl, $ds-breakpoints) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.card-customer-solutions {
  background-color: $gray-lightest;
  border-radius: $border-radius-lg;
  border: 0;
}

.card-customer-solutions .card-header {
  padding: $spacing-md;
  text-align: center;
  color: $white;
  border-top-left-radius: $border-radius-lg;
  border-top-right-radius: $border-radius-lg;
  background-color: $gray-darkest;
}

.card-customer-solutions.bundle .card-header {
  background-color: $purple;
}

.card-customer-solutions .card-header .label {
  color: $white;
}

.card-customer-solutions .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $spacing-md;
}

.card-customer-solutions .card-footer {
  padding-left: $spacing-md;
  padding-right: $spacing-md;
  padding-bottom: $spacing-md;
}

.card-customer-solutions .card-footer .btn {
  margin-left: $spacing-xxs;
  margin-right: $spacing-xxs;
}

.card-customer-solutions .card-footer .btn:first-child {
  margin-left: 0;
}

.card-customer-solutions .card-footer .btn:last-child {
  margin-right: 0;
}