:root{
    --nb-article-card-9-card-border-radius: var(--nb-border-radius-8);
    --nb-article-card-9-overlay-color: #0000004D;

    --nb-article-card-9-title-font-size: var(--nb-font-size-24);
    --nb-article-card-9-title-font-weight: var(--nb-font-semibold);
    --nb-article-card-9-title-color: var(--nb-color-white);

    --nb-article-card-9-description-font-size: var(--nb-font-size-14);
    --nb-article-card-9-description-font-weight: var(--nb-font-regular);
    --nb-article-card-9-description-color: var(--nb-color-white);

    --nb-article-card-9-category-font-size: var(--nb-font-size-12);
    --nb-article-card-9-category-font-weight: var(--nb-font-regular);
    --nb-article-card-9-category-color: var(--nb-color-white);

    --nb-article-card-9-date-font-size: var(--nb-font-size-12);
    --nb-article-card-9-date-font-weight: var(--nb-font-regular);
    --nb-article-card-9-date-color: var(--nb-color-white);

}

.nb-article-card-9 {
    overflow: hidden;
}

.nb-article-card-9 .nb-title {
    font-size: var(--nb-article-card-9-title-font-size);
    font-weight: var(--nb-article-card-9-title-font-weight);
    color: var(--nb-article-card-9-title-color);
    margin-bottom: 5px;
    height: calc(var(--nb-dt-rows) * var(--nb-h4-line-height) * var(--nb-article-card-9-title-font-size));
}

.nb-article-card-9 .nb-article-short-description {
    font-size: var(--nb-article-card-9-description-font-size);
    font-weight: var(--nb-article-card-9-description-font-weight);
    color: var(--nb-article-card-9-description-color);
    height: calc(var(--nb-rows) * var(--nb-paragraph-line-height) * var(--nb-article-card-9-description-font-size));
}

.nb-article-card-9 .nb-article-date {
    font-size: var(--nb-article-card-9-date-font-size);
    font-weight: var(--nb-article-card-9-date-font-weight);
    color: var(--nb-article-card-9-date-color);
    text-transform: uppercase;
}

.nb-article-card-9 .nb-article-category .nb-link,
.nb-article-card-9 .nb-article-category {
    font-size: var(--nb-article-card-9-category-font-size);
    font-weight: var(--nb-article-card-9-category-font-weight);
    color: var(--nb-article-card-9-category-color);
}

.nb-article-card-9 .nb-card {
    border-radius: var(--nb-article-card-9-card-border-radius);
    border: unset;
}

.nb-article-card-9 .nb-article-image img{
    border-radius: var(--nb-article-card-9-card-border-radius);
}

.nb-article-card-9 .nb-category-date-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.nb-article-card-9:has(.nb-article-date) .nb-article-category {
    padding-right: 15px;
    border-right: var(--nb-border-width) var(--nb-border-style) var(--nb-article-card-9-category-color);
    text-transform: uppercase;
}

.nb-article-card-9 .nb-card-body {
    position: absolute;
    bottom: 15px;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s, opacity 0.5s;
    z-index: 3;
}

.nb-article-card-9:hover .nb-card-body {
    opacity: 1;
    transform: translateY(0);
}

.nb-article-card-9:hover .nb-article-image:before {
    content: '';
    background: var(--nb-article-card-9-overlay-color);
    border-radius: var(--nb-article-card-9-card-border-radius);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
    top: 0;
}

.nb-article-card-9 .nb-card .nb-article-image > .nb-link {
    display: block;
}

@media screen and (max-width: 768px) {
    :root{
        --nb-article-card-9-card-border-radius: var(--nb-border-radius-8);
        --nb-article-card-9-overlay-color: transparent;

        --nb-article-card-9-title-font-size: var(--nb-font-size-20);
        --nb-article-card-9-title-color: var(--nb-text-color-primary);
        --nb-article-card-9-description-color: var(--nb-text-color-primary);
        --nb-article-card-9-category-color: var(--nb-text-color-primary);
        --nb-article-card-9-date-color: var(--nb-text-color-primary);
    }

    .nb-article-card-9 .nb-card-body {
        position: relative;
        bottom: unset;
        padding: 15px 0 0;
        opacity: 1;
        transform: unset;
        transition: unset;
        z-index: 3;
    }

    .nb-article-card-9 .nb-article-category {
        padding-right: 10px;
    }

    .nb-article-card-9 .nb-category-date-wrapper {
        margin-bottom: 5px;
        gap: 5px 10px;
    }
}