.card {
    margin: 10px 0;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border-radius: var(--rounded);
    background-color: var(--color-white);
}
.card > .content {
    padding: var(--padding-std-compact);
}
.card.marked {
    border-left: 4px solid var(--color-grey-300);
}
.card:only-child,
.card:last-of-type {
    margin: 0px;
}
.card > .card-footer {
    color: var(--color-grey-500);
    display: flex;
    padding: var(--padding-std-compact);
    align-items: center;
    background-color: var(--color-table);
}
.card > .card-footer.right {
    justify-content: flex-end;
}

@media (min-width: 640px) {
    .card {
        border-radius: var(--rounded-lg);
    }
    .card.marked {
        border-left: none;
    }
}

@media (min-width: 1440px) {
    .card > .content {
        padding: var(--padding-std-padded);
    }
    .card > .card-footer {
        padding: var(--padding-std-padded);
    }
}