.header-main {
    /* position: relative; */
    height: calc(100svh - var(--heightNav,0px));
    /* margin-top: var(--heightNav,0px); */
}

html:has(.header-main:not([data-state])) #curtain {
    display: none;
}


/* PRELOADER */
.header-main .preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    pointer-events: none;
}

.header-main .preloader :is(.content, .bg) {
    position: absolute;
    inset: 0;
}

.header-main .preloader :is(.logo-intro, .deco) {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.header-main .preloader :is(.bg, .content) {
    -webkit-mask-image: url('../../img/layout/header-main/mask.svg');
    mask-image: url('../../img/layout/header-main/mask.svg');


    will-change: mask;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 150% 150%;
    mask-size: 150% 150%;

    -webkit-mask-position: center;
    mask-position: center;
}

.header-main .preloader .deco {
    display: grid;
    width: var(--pattern-size);
    height: var(--pattern-size);
    --fill-op: 1;
}

.header-main .preloader .deco>* {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
}

.header-main .preloader .deco-square {
    overflow: hidden;
    background: var(--bodyBackground);
}

.header-main .preloader .subtitle {
    color: var(--canvas-weave);
    line-height: 130%;
    letter-spacing: 0.02em;
    position: absolute;

    left: 50%;
    translate: -50% 0;
    font-weight: 500;
    text-align: center;
    text-transform: none;
}

@media only screen and (min-width : 961px) {

    .header-main .preloader .logo-intro {
        width: 47.4rem;
    }

    .header-main .preloader .subtitle {
        font-size: 2.4rem;
        bottom: 9rem;
    }


}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .header-main .preloader .subtitle {
        font-size: 1.6rem;
        bottom: 26.98svh;
    }

    .header-main .preloader .logo-intro {
        width: 28.86rem;
    }
}



/* BANNER */
.header-main :is(.banner, #important) {
    position: relative;
    height: 100%;
    gap: 0;
}


.header-main .banner :is(.splide__slide, .splide__track) {
    height: 100%;
}

.header-main .banner .splide__slide {
    width: 100%;
}

.header-main .banner header {
    border-block: var(--border);
    background: var(--canopy-green);
    color: var(--canvas-weave);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header-main .banner .splide {
    flex: 1;
}

.header-main .banner .splide__arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding-inline: calc(4rem + (var(--gap-desktop) * 0.5));
}
.header-main .banner .splide__arrows::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
    background-blend-mode: multiply;
}
.header-main .banner .splide__arrows>* {
    position: static;
    transform: none;

    color: var(--canvas-weave);
    font-size: 3.4rem;
    opacity: 1;
}

@media only screen and (min-width : 961px) {
    .header-main .banner .splide {
        height: 82.74%;

    }

    .header-main .banner header {
        padding-block: 4.9rem;
    }

    .header-main .banner .splide__arrows {
        padding-block: 4rem;
    }

    .header-main .banner header {
        height: 17.25%;
    }

}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .header-main .banner .splide {
        height: 82.47%;
    }

    .header-main .banner header {
        padding-block: 3rem;
    }

    .header-main .banner .splide__arrows {
        padding-block: 6.5rem 2rem;
        padding-inline: 2rem;
    }

    .header-main .banner .splide__arrows>* {
        font-size: 3rem;
    }
}

/* EDITOR */

.edit-post-visual-editor .header-main {
    overflow: hidden;
}
.edit-post-visual-editor .header-main .preloader {
    display: none;
}
.edit-post-visual-editor .header-main .splide__list{
    overflow-x: scroll;
}

.edit-post-visual-editor .header-main .splide__arrows {
    display: none;
}