.tb-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: config('colors.grey-darkest');
    height: 100%;
    max-width: config('maxWidth.sm');
    border: 1px solid config('colors.grey-light');
    transition: $transition-time ease-in;
}

// Cards can, but don't have to be links. Thus state-styles are only
// applied explicitly to cards on link tags
a.tb-card:hover,
a.tb-card:focus {
    text-decoration: none;
    background-color: config('colors.grey-lighter');
}

a.tb-card:active {
    transform: translateY(2px);
}

.tb-card__image {
    display: block;
    width: 100%;
    height: 14rem;
    object-fit: cover;
}

/*
 * If the teaser doesnt have an image, render the image-fallback div with a
 * background color that makes it a just visible area on a light background color.
 * If the project has dark background colors, this needs to be themed accordingy.
 */

.tb-card__image--fallback {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: config('colors.grey-lightest');

    .c-icon {
        font-size: 3rem;
        color: config('colors.grey');
    }
}

.tb-card__category-list {
    @apply .-mr-1;
    @apply .-ml-1;
    position: absolute;
    top: config('margin.4');
    right: config('margin.4');
    left: config('margin.4');
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.tb-card__category-item {
    font-size: config('textSizes.sm');
    line-height: 1;
    margin-right: config('margin.1');
    margin-bottom: config('margin.1');
    margin-left: config('margin.1');
    padding: .5em .75em;
    color: config('colors.white');
    border-radius: 999px;
    white-space: nowrap;
    background-color: config('colors.grey-darkest');
}

.tb-card__body {
    padding: config('padding.6');
    padding-top: config('padding.4');
}

.tb-card__topline {
    font-size: config('textSizes.sm');
    margin: 0;
}

.tb-card__title {
    font-size: config('textSizes.2xl');
    margin-top: .25em;
}

.tb-card__copy {
    margin-top: .5em;
}

