@import "globals.scss";

.#{$prefix}card {
    &.#{$prefix}raised-1, &.#{$prefix}raised {
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    }
    &.#{$prefix}raised-2 {
        box-shadow: 0 .25em .255em 0 rgba(0, 0, 0, 0.14),
            0 .125em .625em 0 rgba(0, 0, 0, 0.12),
            0 .325em .125em -.25em rgba(0, 0, 0, 0.2);
    }

    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;

    color: #333;

    .#{$prefix}card-media {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        a, img, iframe {
            display: block;
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
            margin: 0 auto;
        }
    }

    .#{$prefix}card-body {
        padding: 1em 1em 1em 1em;
    }

    .#{$prefix}card-title {
        font-size: 1.25em;
        font-weight: 500;
        padding: .8em .8em 0 .8em;
    }
}