:root{
    --nb-carousel-banner-24-arrow-color: var(--nb-color-black);
    --nb-carousel-banner-24-arrow-bg: transparent;

    --nb-carousel-banner-24-not-first-aspect-ratio: 5/2;
}

main > *:first-child .nb-carousel-banner-24:first-child .nb-slider-item-box-31{
    height: 100svh;
    width: 100%;
}

main > *:not(:first-child) .nb-carousel-banner-24{
    .nb-slider-item-box-31 .nb-html-video,
    .nb-slider-item-box-31 .nb-slider-item-image,
    .nb-slider-item-box-31 .nb-slider-item-image > .nb-img-wrapper{
        aspect-ratio: var(--nb-carousel-banner-24-not-first-aspect-ratio);
    }
}

.nb-carousel-banner-24 .nb-slider-item-box-31 .nb-html-video,
.nb-carousel-banner-24 .nb-slider-item-box-31 .nb-slider-item-image,
.nb-carousel-banner-24 .nb-slider-item-box-31 .nb-slider-item-image > .nb-img-wrapper{
    width: 100%;
    height: 100%;
}

.nb-carousel-banner-24 .nb-slider-item-box-31 .nb-html-video video,
.nb-carousel-banner-24 .nb-slider-item-box-31 .nb-slider-item-image .nb-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nb-carousel-banner-24 .nb-slider-item-box-31:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 250px;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0) 0%, #2A2A2A 100%);
    z-index: 1;
}
.nb-carousel-banner-24 .nb-slider-item-box-31:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0) 0%, #2A2A2A 100%);
    transform: rotateZ(180deg);
    z-index: 1;
}
/* Arrows */
.nb-carousel-banner-24 .nb-slider-arrows .slider-arrow > i{
    width: 44px;
    height: 44px;
    background: var(--nb-carousel-banner-24-arrow-bg);
    /*opacity: .3;*/
    color: var(--nb-carousel-banner-24-arrow-color);
}
/*.nb-carousel-banner-24 .nb-slider-arrows{*/
/*    opacity: 0;*/
/*    transition: opacity .3s ease-in-out;*/
/*}*/
/*.nb-carousel-banner-24:hover .nb-slider-arrows{*/
/*    opacity: 1;*/
/*}*/


/* Indicators */
.nb-carousel-banner-24 .nb-slider-dots{
    position: absolute;
    right: 40px;
    bottom: 40px;
}

.loader-indicators .slick-dots > li > button{
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid black;
    box-shadow: none;
    background: transparent;
    border-radius: 50%;
}
.nb-slider-dots.loader-indicators .slick-dots > li:before{
    display: none;
}
.nb-slider-dots.loader-indicators .slick-dots > li{
    background: none;
    width: unset;
    height: unset;
    border-radius: unset;
    background: transparent;
}

@media screen and (max-width: 768px) {
    /* Indicators */
    .nb-carousel-banner-24 .nb-slider-dots{
        position: absolute;
        right: 15px;
        bottom: 15px;
    }
}