:root {
    --nb-card-21-title-color: var(--nb-color-white);
    --nb-card-21-overlay-color: var(--nb-color-black);
    --nb-card-21-overlay-opacity: 0.4;
    --nb-card-21-category-hover-color: var(--nb-text-link-1-secondary-hover-color);
}

.nb-card-21{
    position: relative;
    max-width: fit-content;
}
.nb-card-21 .nb-title{
    margin-top: 5px;
    --nb-dt-rows: auto;
    --nb-rows: auto;
    margin-bottom: 0;
}
.nb-card-21 .nb-category-and-title-wrapper{
    position: relative;
    margin-top: 10px;
}
.nb-card-21 .nb-category-and-title-wrapper .category-and-date .nb-link:hover{
    color: var(--nb-card-21-category-hover-color);
}

@media screen and (min-width: 992px) {
    .nb-card-21 .nb-category-and-title-wrapper{
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 20px 20px 20px;
        opacity: 0;
        z-index: 2;
    }
    .nb-card-21 .nb-category-and-title-wrapper.nb-text-wrapper *{
        --nb-category-and-date-color: var(--nb-card-21-title-color);
        color:var(--nb-card-21-title-color);
    }
    .nb-card-21 .nb-img-wrapper{
        max-width: fit-content;
    }

    /*hover*/
    .nb-card-21.nb-element-hover .nb-img-wrapper::before,
    .nb-card-21:hover .nb-img-wrapper::before{
        content: '';
        position: absolute;
        inset: 0;
        background: var(--nb-card-21-overlay-color);
        opacity: var(--nb-card-21-overlay-opacity);
        z-index: 1;
        pointer-events: none;
    }
    .nb-card-21.nb-element-hover .nb-category-and-title-wrapper,
    .nb-card-21:hover .nb-category-and-title-wrapper{
        opacity: 1;
    }
}