.card, [class*="card-fill"] {
    @extend %normalize_text;

    position: relative;
    display: flex;
    flex-direction: column;
    background-color: $white-color;
    // color: $font-color-normal;
    word-break: break-word;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    min-width: 0;
    border: none;
    transition: box-shadow .1s ease-in-out;

    > .card-item {
        flex-grow: 1;
        display: block;
        border: 1px solid var(--card-border-color);
        border-radius: inherit;
        padding: rem(12) rem(16);
        margin: 0;
        position: relative;

        > .card-image {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border-radius: inherit;
            z-index: 1;

            > img, > video {
                width: 100%; height: 100%;
                border-radius: inherit; z-index: 1;
            }
        }
    }

    > *:nth-child(n+2):not(:last-child){ border-radius: 0; }
    > *:last-child, > *:last-child.card-image > img{ border-top-left-radius: 0; border-top-right-radius: 0; }
    > *:first-child, > *:first-child.card-image > img {
        border-top-left-radius: var(--card-radius) !important;
        border-top-right-radius: var(--card-radius) !important;
        border-bottom-left-radius: 0; 
        border-bottom-right-radius: 0;
    }
}

[class*="card-fill"] {
    overflow: hidden;

    > * { position: relative; z-index: 2}

    &:before{
        position: absolute;
        content: '';
        left: 0; bottom: var(--card-fill-gutter);
        width: 100%; height: 100%;
        background-color: var(--var-bg-color);
        z-index: 1;
    }
}

.card-fill-top:before{ bottom: auto; top: var(--card-fill-gutter); }
.card-fill-left:before{ bottom: auto; left: var(--card-fill-gutter); }
.card-fill-right:before{ bottom: auto; left: auto; right: var(--card-fill-gutter); }