.card {
  border-color: $gray-300;

  > .bcl-card__image-wrapper:first-child {
    overflow: hidden;
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
  }
}

@each $color, $value in $theme-colors {
  .card.text-bg-#{$color} {
    .card-header,
    .card-footer {
      border: none;
      background: shade-color($value, 20%);
    }
  }
}