:root {
    --nb-promotion-card-1-border-radius: 8px;
    --nb-promotion-card-1-padding-x: 20px;
    --nb-promotion-card-1-padding-y: 20px;
    --nb-promotion-card-1-max-height: 200px;
    --nb-promotion-card-1-spacer: 14px;

    --nb-promotion-card-1-description-color: var(--nb-text-color-primary);
    --nb-promotion-card-1-description-font-size: var(--nb-font-size-16);
    --nb-promotion-card-1-description-font-weight: var(--nb-font-weight-400);
    --nb-promotion-card-1-description-line-height: var(--nb-body-line-height);
    --nb-promotion-card-1-description-rows: 2;

    --nb-promotion-card-1-detail-link-color: var(--nb-spec-color);
    --nb-promotion-card-1-detail-link-font-size: var(--nb-font-size-16);
    --nb-promotion-card-1-detail-link-font-weight: var(--nb-font-weight-400);
    --nb-promotion-card-1-detail-link-line-height: 24px;
}

.nb-promotion-card-1 {
    display: flex;
    flex-direction: row;
    height: var(--nb-promotion-card-1-max-height);
    border-radius: var(--nb-promotion-card-1-border-radius);
    overflow: hidden;
}

.nb-promotion-card-1.nb-card > .nb-img-wrapper {
    flex: 0 0 var(--nb-promotion-card-1-max-height);
    width: var(--nb-promotion-card-1-max-height);
    height: var(--nb-promotion-card-1-max-height);
    border-top-left-radius: var(--nb-promotion-card-1-border-radius);
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--nb-promotion-card-1-border-radius);
}

.nb-promotion-card-1 .nb-promotion-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nb-promotion-card-1.nb-card a {
    display: block;
}

.nb-promotion-card-1 .nb-promotion-card-1-body {
    flex: 1;
    padding: var(--nb-promotion-card-1-padding-y) var(--nb-promotion-card-1-padding-x);
    overflow: hidden;
}

.nb-promotion-card-1 .nb-promotion-card-1-body > * + * {
    margin-top: var(--nb-promotion-card-1-spacer);
}

.nb-promotion-card-1 .nb-promotion-card-1-body .nb-promotion-date-and-status-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nb-promotion-card-1 .nb-promotion-description > *,
.nb-promotion-card-1 .nb-promotion-description > * > *,
.nb-promotion-card-1 .nb-promotion-description > * > * > * {
    color: var(--nb-promotion-card-1-description-color);
    font-size: var(--nb-promotion-card-1-description-font-size);
    font-weight: var(--nb-promotion-card-1-description-font-weight);
    line-height: var(--nb-promotion-card-1-description-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: var(--nb-promotion-card-1-description-rows);
    -webkit-box-orient: vertical;
}

.nb-promotion-card-1 .nb-promotion-detail-link {
    color: var(--nb-promotion-card-1-detail-link-color);
    font-size: var(--nb-promotion-card-1-detail-link-font-size);
    font-weight: var(--nb-promotion-card-1-detail-link-font-weight);
    line-height: var(--nb-promotion-card-1-detail-link-line-height);
}

@media screen and (max-width: 768px) {
    :root {
        --nb-promotion-card-1-max-height: auto;
        --nb-promotion-card-1-padding-x: 10px;
        --nb-promotion-card-1-padding-y: 10px;
        --nb-promotion-card-1-spacer: 10px;
    }

    .nb-promotion-card-1 {
        flex-direction: column;
    }

    .nb-promotion-card-1.nb-card > .nb-img-wrapper {
        border-top-left-radius: var(--nb-promotion-card-1-border-radius);
        border-top-right-radius: var(--nb-promotion-card-1-border-radius);
        border-bottom-left-radius: 0;
    }

    .nb-promotion-card-1 .nb-promotion-card-1-body .nb-promotion-date-and-status-wrapper {
        align-items: unset;
        flex-direction: column;
    }
}

@media screen and (max-width: 576px) {
    :root {
        --nb-promotion-card-1-description-font-size: var(--nb-font-size-14);
    }
}