/* Card
--------------------*/
.card-count {
    orphans: 1;
    widows: 1;
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
    .card {
        display: inline-block;
        width: 100%;
    }
}
@for $i from 2 through 4 {
    .card-#{$i}-count {
        -webkit-column-count: #{$i};
           -moz-column-count: #{$i};
                column-count: #{$i};
    }
}
@include up-md {
    @for $i from 2 through 4 {
        .card-md-#{$i}-count {
            -webkit-column-count: #{$i};
               -moz-column-count: #{$i};
                    column-count: #{$i};
        }
    }
}
@include up-lg {
    @for $i from 2 through 4 {
        .card-lg-#{$i}-count {
            -webkit-column-count: #{$i};
               -moz-column-count: #{$i};
                    column-count: #{$i};
        }
    }
}
@include up-xl {
    @for $i from 2 through 4 {
        .card-xl-#{$i}-count {
            -webkit-column-count: #{$i};
               -moz-column-count: #{$i};
                    column-count: #{$i};
        }
    }
}

.card {
	border: 1px solid $px-card-border;
    .card-footer {
        background-color: $px-white; 
        border-top: 1px solid $px-card-border;
        padding-left:2.25rem ;
        padding-right:2.25rem ;
    }
    .card-header {
        background-color: $px-white; 
        border-bottom: 1px solid $px-card-border;   
    }
    .list-group-item {
        border-color: $px-card-border;
        color: $px-body-color;
    }

}
.card-frame {
    border-bottom-width: 5px;
    &:hover {
        border-color: $px-theme;
    }
}