.plan-col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;

    margin-left: auto;
    margin-right: auto;

    @include media-breakpoint-down(lg) {
        grid-template-columns: repeat(1, 1fr);
        max-width: 60%;
    }
    @include media-breakpoint-down(md) {
        grid-template-columns: repeat(1, 1fr);
        max-width: 80%;
    }
    @include media-breakpoint-down(sm) {
        grid-template-columns: repeat(1, 1fr);
        max-width: 100%;
    }
}


ul.plan-items {
    display: block;
    margin: 0;
    padding: 0;

    li.plan-item {
        list-style-type: none;
        position: relative;
        margin-bottom: 3px;
        font-size: 11px;

        &::before {
            content: "\2714";
            color: #fff;
            background-color: #39dc56;
            border-radius: 25px;
            margin-right: 3px;
            text-align: center;
            padding: 1px 3px;
            font-size: 8px;
        }
    }
}


.plan-job-posting {
    background: linear-gradient(90deg, rgb(15 27 46), rgb(24, 45, 78), #16a3f2);
    background-size: 220% 120%;
    -webkit-animation: AnimationName 10s ease-in infinite;
    animation: AnimationName 5s ease-in infinite;

    .plan-label {
        position: absolute;
        top: -35px;
        right: 0;
        z-index: 10;
        background: #fff;
        color: #03A9F4;
        padding: 3px 12px;
        border-radius: 1px;
        font-size: 12px;
    }

    .category-title {
        color: #fff;
    }

    .category-subtitle {
        color: #fff;
    }

    #plan-standard {
        transform: scaleY(0.95);
    }

    #plan-recruitment {
        .card-header {
            background: #0190cf;
        }
    }

    #plan-premium {
        transform: scaleY(1.025);
        box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);

        .card-header {
            //background: linear-gradient(90deg, rgb(38, 66, 112), #107cb8, #16a3f2);
            //background-size: 220% 120%;
            //-webkit-animation: AnimationName 10s ease-in infinite;
            //animation: AnimationName 5s ease-in infinite;
        }
    }

    .card-header {
        background-color: #03a9f4;
        padding-top: 30px;
        padding-bottom: 30px;
        border-radius: 5px;
        position: relative;
        left: -3px;
        top: 2px;
    }

    .card-footer {
        border-top: none;
    }

    .cart-title {
        color: #fff;
    }


}

.plan-recruitment-support {
    //background-color: #f2f4f4;
    background: linear-gradient(34deg, #f2f4f4, #e0e0e0, #f2f4f4);
    background-size: 220% 120%;
    //-webkit-animation: AnimationName 10s ease-in infinite;
    //animation: AnimationName 3s ease-in infinite;

    .plan-label {
        position: absolute;
        top: -35px;
        right: 0;
        z-index: 10;
        background: #fff;
        color: #0598da;
        padding: 3px 12px;
        border-radius: 1px;
        font-size: 12px;
    }

    .card-header {
        background-color: #f2e590;
        padding-top: 35px;
        padding-bottom: 35px;
        border-radius: 5px;
        position: relative;
        left: -3px;
        top: 2px;
    }

    .card-footer {
        border-top: none;
    }

    .cart-title {
        color: #000;
    }

    .card:nth-child(3) {

        .card-header {
            //background: linear-gradient(90deg, #ffffff, #f2e590, #d8cc7d);
            //background-size: 220% 120%;
            //-webkit-animation: AnimationName 10s ease-in infinite;
            //animation: AnimationName 3s ease-in infinite;

        }

        box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);

    }

    .text-gold {
        color: #a99f5d;
    }
}