.nb-img-wrapper-with-content {
    position: relative;
}

.nb-img-wrapper-with-content .nb-position{
    display: none;
}

.nb-img-wrapper-with-content .nb-position.nb-top-left-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-spacer-y)/2);
    position: absolute;
    top: calc(var(--nb-spacer-y)/2);
    left: calc(var(--nb-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-img-wrapper-with-content .nb-position.nb-top-right-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-spacer-y)/2);
    position: absolute;
    top: calc(var(--nb-spacer-y)/2);
    right: calc(var(--nb-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-img-wrapper-with-content .nb-position.nb-bottom-left-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-spacer-y)/2);
    position: absolute;
    bottom: calc(var(--nb-spacer-y)/2);
    left: calc(var(--nb-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-img-wrapper-with-content .nb-position.nb-bottom-right-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-spacer-y)/2);
    position: absolute;
    bottom: calc(var(--nb-spacer-y)/2);
    right: calc(var(--nb-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-product-img-wrapper-with-content  {
    position: relative;
}

.nb-product-img-wrapper-with-content .nb-position{
    display: none;
}

.nb-product-img-wrapper-with-content .nb-position.nb-top-left-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-product-spacer-y)/2);
    position: absolute;
    top: calc(var(--nb-product-spacer-y)/2);
    left: calc(var(--nb-product-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-product-img-wrapper-with-content .nb-position.nb-top-right-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-product-spacer-y)/2);
    position: absolute;
    top: calc(var(--nb-product-spacer-y)/2);
    right: calc(var(--nb-product-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-product-img-wrapper-with-content .nb-position.nb-bottom-left-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-product-spacer-y)/2);
    position: absolute;
    bottom: calc(var(--nb-product-spacer-y)/2);
    left: calc(var(--nb-product-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

.nb-product-img-wrapper-with-content .nb-position.nb-bottom-right-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--nb-product-spacer-y)/2);
    position: absolute;
    bottom: calc(var(--nb-product-spacer-y)/2);
    right: calc(var(--nb-product-spacer-x)/2);
    max-width: 50%;
    max-height: 50%;
}

picture {
    position: relative;
}

.nb-hover:hover {
    filter: brightness(0.7);
    transition: filter 0.5s ease-in-out;
}

.nb-hover:hover + .nb-icon {
    opacity: 1;
    transition: 0.5s ease-in-out;
}

.nb-hover + .nb-icon {
    font-size: 50px;
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--nb-color-white);
    pointer-events: none;
}