.card {
    border: none;
    border-radius: 7px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out;
    background-color: var(--card-bg, #222);
    /*padding: 10px;*/
    width: 290px;
}

.total_card {
    padding-left: 85px;
}

.left_card {

}


.middle_card {
    padding-left: 0px;
}

.right_card {
    padding-left: 0px;
}

.card:hover {
    transform: scale(1.03);
}

.card img {
    width: 90%;
    border-radius: 6px;
    height: 152px;
    object-fit: cover;
    justify-self: flex-end;
    /*margin-left: 15px;
    margin-top: 1px;*/
    margin: auto;
    margin-top: 16px;
}

.card-body {
    padding: 0px 15px 0;
}

.card-title {
    font-size: 19px;
    line-height: 26px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.card-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.card-text,
.leftText,
.rightText {
    font-size: 11px;
    color: #555;
}

.sidebar {
    background: var(--card-bg, #222);
    padding: 15px;
    border-radius: 10px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .card {
        width: 280px;
    }

    .total_card {
        padding-left: 0px;
    }

    .left_card {

    }


    .middle_card {
        padding-left: 0px;
    }

    .right_card {
        padding-left: 0px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .card_container {
        margin: 40px;
        padding: 0;
        padding-left: 10%;
    }

    .card {
        width: 170px;
    }

    .card-title {
        font-size: 12px;
        line-height: 21px;
        color: #555;
        margin-bottom: 0px;
        font-family: 'Inter', sans-serif;
    }

    .card-text,
    .leftText,
    .rightText {
        font-size: 9px;

    }

    .card img {
        width: 100%;
        border-radius: 6px;
        height: 80px;
        object-fit: cover;
        margin-left: 0;
    }

    .total_card {
        padding-left: 0px;
    }

    .left_card {

    }


    .middle_card {
        padding-left: 0px;
    }

    .right_card {
        padding-left: 0px;
    }
}

@media (max-width: 768px) {

    .card-body {
        padding-bottom: 15px;
    }

    .card_container {
        margin: 0;
        padding: 0;
    }

    .card {
        width: 170px;
    }

    .card-title {
        font-size: 12px;
        line-height: 21px;
        color: #555;
        margin-bottom: 0px;
        font-family: 'Inter', sans-serif;
    }

    .card-text,
    .leftText,
    .rightText {
        font-size: 9px;

    }

    .card img {
        width: 100%;
        border-radius: 17px;
        height: 140px;
        object-fit: cover;
        /*margin-left: 0;*/
        margin-top: 0px;
        padding: 10px;
    }

    .total_card {
        padding-left: 0px;
    }

    .left_card {

    }


    .middle_card {
        padding-left: 0px;
    }

    .right_card {
        padding-left: 0px;
    }

}