:root {
    --nb-article-card-12-title-color: var(--nb-text-color-primary);
    --nb-article-card-12-title-font-size: var(--nb-font-size-18);
    --nb-article-card-12-title-font-weight: var(--nb-font-weight-600);
    --nb-article-card-12-title-line-height: var(--nb-body-line-height);
    --nb-article-card-12-title-rows: 1;

    --nb-article-card-12-description-font-size: var(--nb-font-size-14);
    --nb-article-card-12-description-border-color: var(--nb-border-color);

    --nb-article-card-12-link-color: var(--nb-text-color-primary);
    --nb-article-card-12-link-bg: var(--nb-color-white);
    --nb-article-card-12-link-font-size: var(--nb-font-size-14);
    --nb-article-card-12-link-font-weight: var(--nb-font-weight-400);
    --nb-article-card-12-link-min-width: 150px;
    --nb-article-card-12-link-padding-x: 0;
    --nb-article-card-12-link-padding-y: 8px;
    --nb-article-card-12-link-border-width: var(--nb-border-width);
    --nb-article-card-12-link-border-color: var(--nb-color-gray-900);
    --nb-article-card-12-link-border-radius: 8px;

    --nb-article-card-12-link-hover-color: var(--nb-color-white);
    --nb-article-card-12-link-hover-bg: var(--nb-color-gray-900);
}

.nb-article-card-12 {
    overflow: hidden;
    height: 100%;

    .nb-card-body {

        > * + * {
            margin-top: 10px;
        }

        .nb-article-name {
            color: var(--nb-article-card-12-title-color);
            font-size: var(--nb-article-card-12-title-font-size);
            font-weight: var(--nb-article-card-12-title-font-weight);
            --nb-dt-rows: var(--nb-article-card-12-title-rows);
            height: calc(var(--nb-article-card-12-title-rows) * var(--nb-article-card-12-title-line-height) * var(--nb-article-card-12-title-font-size));
        }

        .nb-article-description,
        .nb-article-description > *,
        .nb-article-description > * > * {
            font-size: var(--nb-article-card-12-description-font-size);
        }

        .nb-article-description > * {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: var(--nb-border-width) var(--nb-border-style) var(--nb-article-card-12-description-border-color);
        }

        .nb-top-wrapper {
            display: flex;
            gap: 20px;
            align-items: center;

            .nb-img-wrapper {
                flex: 1;
            }

            .nb-article-name {
                flex: 4;
            }

            .nb-category-image .nb-img{
                max-width: 75px;
            }
        }

        .nb-article-card-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: var(--nb-article-card-12-link-min-width);
            padding: var(--nb-article-card-12-link-padding-y) var(--nb-article-card-12-link-padding-x);
            border: var(--nb-article-card-12-link-border-width) var(--nb-border-style) var(--nb-article-card-12-link-border-color);
            -webkit-border-radius: var(--nb-article-card-12-link-border-radius);
            -moz-border-radius: var(--nb-article-card-12-link-border-radius);
            border-radius: var(--nb-article-card-12-link-border-radius);
            color: var(--nb-article-card-12-link-color);
            background-color: var(--nb-article-card-12-link-bg);
            font-size: var(--nb-article-card-12-link-font-size);
            font-weight: var(--nb-article-card-12-link-font-weight);

            &:hover,
            &:focus,
            &:active {
                color: var(--nb-article-card-12-link-hover-color);
                background-color: var(--nb-article-card-12-link-hover-bg);
            }
        }
    }

}