/* got from

    https://codepen.io/sdthornton/pen/wBZdXq

    a display is visible there too.


*/

.card {
    background: #fff;
    border-radius: 5px;
    display: inline-grid;
    height: 100%;
    position: relative;
    margin-bottom: 1rem;
    width: 100%;
}



.card-padding {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.card-noPadding {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* minimal padding left and right*/
.card-lr-minimal-padding {
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* good shadow, shadow increases on hover */
.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

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


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


/** simillar to card-2 but with more at bottom */
.card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/** even more at bottom */
.card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/* lots more at bottom */
.card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}