.card {
    
}

.card-header {
    display: flex;
    padding: 16px;
    align-items: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;

    & .card-header-avatar {
        flex: 0 0 auto;
        margin-right: 16px;
        margin-inline-end: 16px;
        margin-inline-start: unset;
    }

    & .card-header-content {
        flex: 1 1 auto;

        & .typography {
            margin-bottom: 0;
        }
    }

    & .card-header-actions {
        flex: 0 0 auto;
        align-self: flex-start;
        margin-top: -8px;
        margin-right: -8px;
        margin-inline-end: -8px;
        margin-inline-start: unset;
    }
}

.card-media {
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card-header + .card-media {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.card-content {
    padding: 16px;
}

.card-actions {
    display: flex;
    padding: 8px;
    align-items: center;
}