.nb-caption-discount {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: var(--nb-discount-width);
    font-size: var(--nb-discount-font-size);
    font-family: var(--nb-discount-font-family);
    line-height: var(--nb-discount-line-height);
}

.nb-caption-discount .nb-discount {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--nb-discount-width);
    height: var(--nb-discount-height);
    border-radius: var(--nb-border-radius-s);
    background-color: var(--nb-discount-bg);
    color: var(--nb-discount-color);
}

.nb-caption-discount .nb-additional-discount {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--nb-discount-width);
    height: var(--nb-discount-height);
    border-radius: var(--nb-border-radius-s);
    background-color: var(--nb-additional-discount-bg);
    color: var(--nb-discount-color);
}

.nb-caption-discount.nb-caption-discount-s {
    max-width: var(--nb-discount-width-s);
}

.nb-caption-discount.nb-caption-discount-s .nb-discount,
.nb-caption-discount.nb-caption-discount-s .nb-additional-discount {
    width: var(--nb-discount-width-s);
    height: var(--nb-discount-height-s);
}

.nb-caption-discount.nb-caption-discount-m {
    max-width: var(--nb-discount-width-m);
}

.nb-caption-discount.nb-caption-discount-m .nb-discount,
.nb-caption-discount.nb-caption-discount-m .nb-additional-discount {
    width: var(--nb-discount-width-m);
    height: var(--nb-discount-height-m);
}

.nb-caption-discount.nb-caption-discount-l {
    max-width: var(--nb-discount-width-l);
}

.nb-caption-discount.nb-caption-discount-l .nb-discount,
.nb-caption-discount.nb-caption-discount-l .nb-additional-discount {
    width: var(--nb-discount-width-l);
    height: var(--nb-discount-height-l);
}

.nb-caption-discount .nb-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    color: var(--nb-discount-icon-color);
}

.nb-caption-discount.nb-caption-discount-square .nb-discount,
.nb-caption-discount.nb-caption-discount-square .nb-additional-discount {
    border-radius: var(--nb-border-0);
}

.nb-caption-discount-circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: var(--nb-discount-width-l);
    height: var(--nb-discount-height-l);
    border-radius: var(--nb-border-radius-full);
    background-color: var(--nb-discount-bg);
    color: var(--nb-discount-color);
    font-size: var(--nb-discount-font-size);
    font-family: var(--nb-discount-font-family);
    line-height: var(--nb-discount-line-height);
}

.nb-caption-discount-rectangle{
    max-width: var(--nb-discount-width-l);
    max-height: var(--nb-discount-height-l);
}
.nb-caption-discount.nb-caption-discount-rectangle .nb-discount,
.nb-caption-discount.nb-caption-discount-rectangle .nb-additional-discount {
    height: calc(var(--nb-discount-height)/2);
    border-radius: var(--nb-border-0);
}