.custom-card{
    max-width: calc(20% - (var(--bs-gutter-x) * .5))
}

@media screen and (min-width: 1921px) {
    .custom-card{
        max-width: calc(14.285714286% - (var(--bs-gutter-x) * .5))
    }
}

@media screen and (max-width: 1920px) {
    .custom-card{
        max-width: calc(20% - (var(--bs-gutter-x) * .5))
    }
}

@media screen and (max-width: 1530px) {
    .custom-card{
        max-width: calc(25% - (var(--bs-gutter-x) * .5))
    }
}

@media screen and (max-width: 1150px) {
    .custom-card{
        max-width: calc(33.33% - (var(--bs-gutter-x) * .5))
    }
}

@media screen and (max-width: 700px) {
    .custom-card{
        max-width: calc(50% - (var(--bs-gutter-x) * .5))
    }
}

@media screen and (max-width: 450px) {
    .custom-card{
        max-width: calc(100% - (var(--bs-gutter-x) * .5))
    }
}

.custom-card .card{
    border-radius: 20px;
    min-height: 365px;
}
  
.custom-card .card-image{
    padding: 20px;
}

.custom-card .card-image img{
    max-height: 155px;
}

.custom-card .name{
    font-size: 19px;
    font-weight: 600;
    color: #333;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    text-align: center;
}

.custom-card .description{
    font-size: 14px;
    color: #707070;
    text-align: center;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    text-align: center;
}

.custom-card .card-content{
    padding: 0 20px;
}

.custom-card .button{
    border: none;
    font-size: 16px;
    color: #FFF;
    padding: 8px 16px;
    background-color: var(--main-color);
    border-radius: 6px;
    /* margin: 14px; */
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-card .button:hover{
    background: var(--bs-primary);
}

.custom-card .card{
    border-radius: 25px !important;
    background-color: #FFF !important;
    border-color: #e5e5e5 !important;
}

.custom-card .card:hover{
    box-shadow: 1px 1px 9px 6px rgb(0 0 0 / 04%);
}

.custom-card .image-content{
    margin-top: auto;
    display: flex;
}

.custom-card .card-content{
    display: block;
    margin-bottom: auto;
}

.custom-card .card-content a{
    display: flex;
    justify-content: center;
    text-decoration: none;
  }

.custom-card .image-content,
.custom-card .card-content{
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
}