.g-pricingtable-container {
    @include display(flex);
    @include flex-flow(row wrap);
    @include flex-wrap(wrap);
    margin: -$content-margin;
}
.g-pricingtable-col-item {
    min-width: 0;
    min-height: 0;
    .g-pricingtable-1-col & {
        @include flex(0 1 100%);
        width: 100%;
    }
    .g-pricingtable-2-col & {
        @include flex(0 1 50%);
        width: 50%;
    }
    .g-pricingtable-3-col & {
        @include flex(0 1 33.33333%);
        width: 33.33333%;
    }
    .g-pricingtable-4-col & {
        @include flex(0 1 25%);
        width: 25%;
    }
    .g-pricingtable-5-col & {
        @include flex(0 1 20%);
        width: 20%;
    }
    .g-pricingtable-6-col & {
        @include flex(0 1 16.66667%);
        width: 16.66667%;
    }
    @include breakpoint(mobile-only) {
        @include flex(0 1 100% !important);
        width: 100% !important;
    }
}
.g-pricingtable-headertext {
    margin-bottom: $content-margin + $content-padding;
}
.g-pricingtable-footertext {
    margin-top: $content-margin + $content-padding;
}

.g-pricingtable {
    list-style: none;
    text-align: center;
    color: $base-text-color;
    background: $base-background;
    box-shadow: 0 0 5px fadeout($base-text-color, 75%);
    border-radius: $border-radius;
    margin: $content-margin;
    position: relative;
    overflow: hidden;

    li {
        padding: $content-padding/3 $content-padding;
    }

    .g-pricingtable-ribbon {
        z-index: 2;
        position: absolute;
        line-height: $core-line-height;
        font-size: $core-font-size - 0.25;
        font-weight: $font-weight-bold;
        font-family: get-font-family($font-family-title);
        color: $white;
        text-transform: uppercase;
        background: $accent-color-2;
        width: 135px;
        top: 20px;
        left: -30px;
        text-align: center;
        letter-spacing: 1px;
        @include transform(rotate(-45deg));
    }

    .g-pricingtable-plan {
        font-size: $core-font-size;
        font-family: get-font-family($font-family-title);
        font-weight: $font-weight-bold;
        text-transform: uppercase;
        line-height: $core-line-height - 0.5;
        padding: ($content-margin + $content-padding) $content-padding;
        @include breakpoint(desktop-range) {
            font-size: $core-font-size + 0.5;
        }
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 0.25;
        }
        @include breakpoint(mobile-only) {
            font-size: $core-font-size + 0.1;
        }
    }
    .g-pricingtable-subtitle {
        padding-top: 0;
        margin-top: -1rem;
        font-size: $core-font-size - 0.1;
    }
    .g-pricingtable-price {
        font-family: get-font-family($font-family-title);
        font-size: $core-font-size * 4;
        font-weight: $font-weight-light;
        line-height: $core-line-height - 0.5;
        padding: 0 $content-padding;
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 1.5;
        }
        @include breakpoint(mobile-only) {
            font-size: $core-font-size + 1;
        }
    }
    .g-pricingtable-period {
        padding: 0 $content-padding;
        opacity: 0.75;
    }
    .g-pricingtable-desc {
        font-size: $core-font-size - 0.1;
        padding: $content-padding + 1 $content-padding + 1 $content-padding;
    }
    .g-pricingtable-item {
        &.g-pricingtable-item-0 {
            position: relative;
            margin-top: $content-margin * 2;
            padding-top: $content-margin + $content-padding;
            &:before {
                background: fadeout($base-text-color, 85%);
                position: absolute;
                content: "";
                display: block;
                width: 20%;
                height: 2px;
                margin-left: -10%;
                top: 0;
                left: 50%;
            }
        }
    }
    .g-pricingtable-cta {
        margin: ($content-margin + $content-padding) 0;
        .button {
            margin-bottom: 0;
        }
    }
}
