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

@include media-breakpoint-up(lg){
  .card {
    &--outer {
      margin-top: -6rem;
      position: relative;

      &.border-0 {
        .card--outer__content:before {
          border:none;
        }
      }

      &:after {
        height: 3.5rem;
        content: '';
        display: table;
        width: 100%;
      }


      &__content {
        position: relative;
        z-index: 5;

        &:before {
          @include size(100%);
          border: $card-border-width solid $card-border-color;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          content:"";
          z-index: -1;
          background: $white;
          max-width: 100vw;
          padding: 3.5rem;
          box-sizing: content-box;
        }

        &--condensed {
          &:before {
            padding: 2.5rem;
          }
        }

        &--dark {
          &:before {
            background: $gray-900;
            border: 0;
          }
        }
      }
    }

    &--icon {
      min-height: 325px;
    }
  }
}