/* *****************************************************************************
*
*  CARD
*
* ***************************************************************************** */

.card--wider-x {
  @extend .card;
  @extend .border-bottom;
  padding: $spacer-4 0!important;
  border-left: none;
  border-right: none;
  border-top: 0;

  @include media-breakpoint-up(lg){
    padding: $spacer-5 0;
    position: relative;
    border-top: $border-width solid $border-color;

    & > * {
      position: relative;
    }

    &::before,
    &::after {
      @include size(3.5rem, 100%);
      content:"";
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      transform: translate(-99%, -1px);
      background: inherit;
      border: $card-border-width solid $card-border-color;
      box-sizing: content-box;
    }

    &::before {
      border-right: none;
    }

    &::after {
      border-left: none;
      left: auto;
      right: 0;
      transform: translate(99%, -1px);
    }
  }
}