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

.grid-testercards .card {
  margin-bottom: 0;
}

.tester-card {
  text-align: center;
  background-color: $card-bg-gray;
}

.tester-card.opportunity {
  background-color: $gray-light;
}

.tester-card.opportunity .card-header {
  border-bottom: none;
}

.tester-card.opportunity a.card-title:hover {
  color: $info;
}

.tester-card.opportunity .card-info {
  border-bottom-color: $white;
}

.tester-card .card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $spacing-sm;
  overflow: hidden;
}

.tester-card.running .card-header {
  background-color: $petrol-dark;
}

.tester-card a.card-header:hover, 
.tester-card a.card-header:focus, 
.tester-card a.card-header:active {
  background-color: $link-hover-color;
}

.tester-card .card-image {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: $spacing-2xl;
  height: $spacing-2xl;
  color: $white;
  background-color: $info;
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

.tester-card .card-image .icon {
  font-size: $icon-xl;
  height: $icon-xl;
}

.tester-card .card-label {
  font-size: $font-size-xs;
}

.tester-card .card-title {
  display: block;
  margin: 0;
  margin-bottom: 2px;
  padding: 0;
  color: $black;
  &:hover, &:focus, &:active {
    color: $link-hover-color;
  }
  h2, h3, h4, h5 {
    margin: 0;
    font-size: $font-size-base;
    font-weight: 600;
  }
}

.tester-card .card-info {
  position: relative;
  padding: $spacing-xxs $spacing-xs $spacing-xs $spacing-xs;
  border-bottom: 1px solid $gray-light;
  line-height: 1.3;
}

.tester-card .card-content {
  padding: $spacing-xs $spacing-xs $spacing-sm $spacing-xs;
  line-height: 1.2;
  &:first-child {
    padding-top: $spacing-xxs;
  }
}

.tester-card .test-status-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: $spacing-xxs;
  span {
    margin-right: $spacing-xs;
    margin-bottom: $spacing-xxs;
  }
  span:last-child {
    margin-right: 0;
  }
}

.tester-card .progress {
  position: absolute;
  appearance: none;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -2px;
  
  &::-webkit-progress-bar {
    background-color: $gray-light;
  }
  &::-webkit-progress-value {
    background-color: $info;
  }
}

.tester-card.opportunity .progress::-webkit-progress-bar {
  background-color: $white
}

.tester-card .label-ends-soon {
  display: inline-block;
  width: auto;
  margin-bottom: $spacing-xxs;
  padding: $spacing-xxs $spacing-xs;
  color: $white;
  background-color: $info;
  border-radius: $border-radius;
}

.tester-card .card-perks-list {
  display: inline-block;
  width: auto;
}

.tester-card .card-perks {
  flex: 1 1 auto;
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: column;
  padding-bottom: $spacing-sm;
}

.tester-card .card-perks-list li {
  display: flex;
  margin-top: $spacing-xxs;
  &:first-child{
    margin-top: 0;
  }
}

.tester-card .label-payout {
  padding-top: $spacing-xs;
}

.tester-card .card-content p:first-child {
  margin-bottom: $spacing-xxs;
}

.tester-card .bullet-list {
  display: inline-block;
}

.tester-card .bullet-list li {
  padding-left: $spacing-sm;
}

.tester-card .bullet-list li::before {
  width: $spacing-xs;
  height: $spacing-xs;
  top: 2px;
}

.tester-card .card-badge {
  background-color: transparent;
}

.tester-card .card-actions .btn {
  height: $btn-height;
}

////// SM Tester Cards //////

.grid-testercards.sm {
  @include media-breakpoint-up(sm) {
    grid-template-columns: 1fr 1fr;
  }
  @include media-breakpoint-up(lg) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  @include media-breakpoint-up(xl) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  @include media-breakpoint-up(2xl) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

.tester-card.sm {
  flex-direction: row;
  padding: $spacing-xs;
}

.tester-card.sm.running {
  color: $white;
  background-color: $petrol-dark;
  .card-title {
    color: $white;
  }
}

.tester-card.sm.running .card-title:hover {
  color: $link-hover-color;
}

.tester-card.sm .card-image {
  width: $spacing-xl;
  height: $spacing-xl;
}

.tester-card.sm .card-image .icon {
  font-size: $spacing;
  height: $spacing;
}

.tester-card.sm .card-title {
  font-size: $font-size-label;
}

.tester-card.sm .card-info {
  flex: 1;
  padding-right: 0;
  padding-bottom: 0;
  text-align: left;
  border-bottom: 0;
}

.tester-card.sm .progress {
  position: relative;
}


////// Campaign Cards //////

.grid-testercards.campaign {
  @include media-breakpoint-up(sm) {
    grid-template-columns: 1fr 1fr;
  }
  @include media-breakpoint-up(lg) {
    grid-template-columns: 1fr 1fr;
  }
  @include media-breakpoint-up(xl) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  @include media-breakpoint-up(2xl) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

.tester-card.campaign .card-title {
  font-size: $font-size-base;
  font-weight: $font-weight-semibold;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding-bottom: $spacing-xxs;
}

.tester-card.campaign .card-image {
  width: $spacing-xxl;
  height: $spacing-xxl;
}

.tester-card.campaign .card-image .icon {
  font-size: $icon-lg;
  height: $icon-lg;
}

.tester-card.campaign .card-info {
  padding-left: $spacing-sm;
  font-size: $font-size-sm;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  overflow: hidden;
  max-height: $spacing-2xl;
}

.grid-tester-taskcards {
  display: grid;
  gap: $grid-gutter-width;
  @include media-breakpoint-up(sm, $ds-breakpoints) {
    grid-template-columns: 1fr 1fr;
  }
  @include media-breakpoint-up(md, $ds-breakpoints) {
    grid-template-columns: 1fr 1fr 1fr;
  }
}