.card {
    background: map_get($ui-colors, light-shade);
    border-radius: 2px;
    display: inline-block;
    margin: 1rem;
    position: relative;


    >.head {
        // height: 72px;
        width: 100%;
        padding: 16px;


        &:after {
            content: "";
            display: table;
            clear: both;
        }

        .icon {
            float: left;
            max-width: 70px;
            min-width: 3em;
            margin-right: 12px;
            position: relative;
            height: 3em;
            border-radius: 50%;
            overflow: hidden;

            &.quarder {
                border-radius: 0;
            }


            i,
            span {
                display: block;
                font-size: 3em;
            }


            img {
                min-height: 100%;
                max-height: 120%;
                width: auto;
                @include center;
            }
        }

        .title-wrapper {
            .title {
                margin: 0;
                line-height: inherit;
                font-size: 1.25em;
                font-weight: inherit;
            }

            .sub-title {
                margin: 0;
                min-height: 1.5em;
                line-height: inherit;
                font-size: 1em;
                color: map_get($default-colors-transparency, secondary);
                font-weight: inherit;
            }    
        }
        
    }


    .head-icon {
        .title-wrapper {
            .title {
                font-size: 1em;
            }
        }
    }

    .devider-headline {
        padding: 9px 16px;
        font-size: 12px;
        text-transform: uppercase;
        color: map_get($default-colors-transparency, primary);
        font-weight: 600;
    }


    .aspect-ratio-box {
        height: 0;
        overflow: hidden;
        padding-top: 591.44px / 1127.34px * 100%;
        background: white;
        position: relative;

        .aspect-ratio-box-inside {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: grey;
        }
    }

    .content {
        padding: 16px;

        &.pre-icon {
            padding-left: 38px;
            position: relative;
            .pre-icon {
                position: absolute;
                left: 16px;
                top: 19px;
            }
        }
    }
}


.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}