@import "../../variable.less";
.card {
    margin: 8px;
    overflow: hidden;
    &:hover {
        box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.01
    }
    to {
        opacity: 1
    }
}

.card>* {
    animation: fadeIn 0.5s;
}

@media (max-width:((@screen-sm-min + 1))) {
    .card {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.CardBottom {
    display: flex;
    height: 74px;
    align-items: center;
}

.card.card-with-img {
    display: flex;
    flex-direction: column;
    >div {
        display: flex;
        flex-direction: column;
        min-height: 400px;
        >div:first-child {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            >div {
                height: 100%;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
            }
        }
    }
}

.CardImage {
    min-height: 200px;
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-origin: padding-box;
    background-attachment: scroll;
    flex-grow: 1;
}