_card.scss

.card {
  &.front {
    display: flex;
    z-index: initial;

    &:before {
      //content:'\e0b0'; // iconic
      //font-family: 'Icons';
      //content: "\f128"; // font-awesome
      //font-family: FontAwesome;
      //font-family: 'Font Awesome 5 Free';
      //font-style: normal;
      //font-weight: normal;
      //text-decoration: inherit;
      //font-size: 8rem;
      //background-size: 8rem 8rem;
      //z-index: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0.05;
    }
  }
}

.card-img {
  min-width: 100%;
  min-height: 100%;

  &.card-img-grayscale {
    filter: saturate(0%);
    //filter: url("filters.svg#custom-grayscale");
  }

  &.card-img-faded {
    opacity: 0.15;

    &.lazyloaded,
    &.lazyloading {}
  }
}

.card-flip {
  background: none;
  border: none;
  transition: transform 300ms;
  transition-timing-function: linear;
  transform-style: preserve-3d;
  transform: rotateY(0deg);

  .card {
    -webkit-font-smoothing: subpixel-antialiased;
    margin: 0;
    height: 100%;

    &.back {
      transform: rotateY(180deg);
      z-index: -1;
      backface-visibility: hidden;
    }
  }

  .card-position-absolute {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;

    .card-footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }

  input[type="radio"]:checked + &,
  input[type="checkbox"]:checked + & {
    transform: rotateY(-180deg) translateZ(0px);
    z-index: $zindex-dropdown;

    .card.front {
      z-index: -1;
      backface-visibility: hidden;
    }

    .card.back {
      z-index: inherit;
      backface-visibility: inherit;
    }
  }
}

.card-img-overlay ~ .card-header {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  background-color: transparent;
  top: 0;
  border-bottom: none;
}

.card-img-overlay ~ .card-footer {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  background-color: transparent;
  bottom: 0;
  border-top: none;
}

.post-list {
  perspective: 50000px;

  .card {
    min-width: 25rem;
    min-height: 14rem;
  }

  .card-flip {
    .card-body {
      max-width: 30rem;
      word-wrap: break-word;
      word-break: break-word;
    }

    .card.front {
      .progress {
        height: 3px;
      }

      &:before {
        font-size: 16rem;
        opacity: 0.25;
      }

      &.bg-success {
        &:before {
          //content:'\e033'; // iconic
          //content: "\f00c"; // font-awesome
          content: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='8rem' viewBox='0 0 512 512'%3e%3cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
        }
      }
    }
  }
}
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $size, $length in $spacers {
      .card-columns,
      .card-deck {
        &.gap-#{$size} {
          column-gap: $length !important;
          line-height: $length !important;

          & > .card {
            margin-bottom: $length !important;
          }
          @if $size == 0 {
            .card {
              border-radius: 0 !important;
            }
          }
        }
      }
    }
  }
}