module card styles

module_card_styles.css

$module-card-font-size: 12.5px;
$module-card-line-height: 1.4;
$module-card-lines-to-show: 3;

.module_card {
    display: table;
    height: 290px;
    width: 526px;
    cursor: pointer;
    margin: 10px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.15);

    &:hover {
        box-shadow: 0px 0px 17px rgba(0, 0, 0, 0.68);
    }

    &>div {
        display: table-cell;
        height: 290px;
    }

    .card_banner {
        width: 250px;
        height:290px;
        vertical-align: middle;
        overflow: hidden;
        background-size: 100% 100%;
        border-radius: 8px 0px 0px 8px;
        box-shadow: inset 0 0 5px 2px;
        position: relative;
        z-index: 3;
        -webkit-transition: border-radius .2s;
        transition: border-radius .2s;

        >img{
            height:100%;
            width:100%;
            border-radius:4px;
            -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
            &:hover {
                -webkit-transform: scale(1.03);
                -moz-transform: scale(1.03);
                -ms-transform: scale(1.03);
                -o-transform: scale(1.03);
                transform: scale(1.03);
                opacity: 0.8;

            
            }
        }

        >h4 { 
               position: absolute; 
               top: 100px; 
               left: 0; 
               width: 100%; 
               //color: #ffedda !important;
               color: #ffffff !important;
               //text-shadow: 2px 2px #a61680;
               text-shadow: 2px 0px 8px black;

            }

    }


    .card_title {
        display: block;
        width:230px;
        font-size: 32px;
        font-weight: 600;
        text-align: center;
        margin: 0px auto;
        letter-spacing: 1px;
    }

    &.animated_card {
        .card_banner {
            border-radius: 8px;
        }
        &:hover .card_banner{
            border-radius: 8px 0px 0px 8px;
        }
    }
    &.animated_card.isOpen {
        .card_banner {
            border-radius: 8px 0px 0px 8px;
        }
    }
    &.animated_card:hover .card_summary {
        left: 30px;
    }
    &.animated_card .card_summary {
        left: 5px;
    }

    .card_summary{
        width: 290px;
        padding: 0px 15px;
        vertical-align: middle;
        border-style: solid;
        border-width: 1px 1px 1px 0px;
        border-radius: 0px 7px 7px 0px;
        border-color: #d5d5d5;
        box-shadow: inset 2px 0px 13px -5px;
        -webkit-transition: left .4s ease-in-out;
        transition: left .4s ease-in-out;
        -webkit-transition-property: left; /* Safari */
        transition-property: left;

        .card_label {
            font-weight: 500;
            font-size: $module-card-font-size;
            letter-spacing: 1px;
            color: black;
        }
        .card_section {
            margin: 5px 0px;
            padding: 5px 0px;

            &:not(:last-child) {
                border-bottom: 1px solid #ccc;
            }
            p {
                margin-bottom: 7px;
                font-size: $module-card-font-size;
            }
            .ellipsis {
                width: 245px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            //enroll-button 
            .module-card-enrol{
                background: rgb(162, 35, 141);
                height: 37px;
                text-align: center;
                color: #ffffff;
                width: 172px;
                font-size: 19px;
                border: 2px solid rgba(43, 51, 63, 0.42);
                border-radius: 5px;
                width: 164px !important;
                margin-top: 2px !important;
                letter-spacing: 0.4px;

                &:hover {
                    box-shadow: 0px 0px 17px rgba(0, 0, 0, 0.68);
                }
            }
        }

        .module_brief {
            display: block; /* Fallback for non-webkit */
            display: -webkit-box;
            height: $module-card-font-size*$module-card-line-height*$module-card-lines-to-show; /* Fallback for non-webkit */
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: $module-card-font-size;
            line-height: $module-card-line-height;
            -webkit-line-clamp: $module-card-lines-to-show;
            -webkit-box-orient: vertical;
            color: black;
        }
    }
}