.body-wrapper:has(section.block-hero-slider) {
    .main-wrapper {
        --offset: 0px;
    }
    .header-wrapper.scheme:not(.remove-scheme, .scrolled-past-header) {
        transition-property: all;
        transition-duration: 100ms;
        transition-timing-function: ease;
        --background-color: transparent !important;
    }
}

section.block-hero-slider {
    padding-top: 0 !important;

    .wrapper {
        position: relative;
        overflow: hidden;
        height: var(--hero-slide-height);

        .swiper {
            height: 100%;
        }
    }

    .pagination-container {
        --max-width: 100%;
        max-width: calc(var(--max-width) - (var(--spacing-base-1) * 2));
        margin-inline: auto;
        width: 100%;
        position: absolute;
        inset: 0;

        @media (min-width: 1565px) {
            --max-width: var(--layout-max-width);
        }
    }

    .swiper-pagination {
        right: 0;
        left: var(--swiper-pagination-left, auto);
        top: 0;
        bottom: 0;
        width: unset;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        margin: auto;
        transform: translate3d(0, 0, 0);

        .swiper-pagination-bullet {
            display: block;
        }
    }

    @media (min-width: 1024px) {
        .swiper-pagination {
            right: 0;
        }
    }

    @media (min-width: 768px) {
        .swiper-pagination {
            top: var(--header-scroll-height);
            gap: 10px;
        }
    }

    /* @media (min-width: 1600px) {
        .swiper-pagination {
            right: calc(var(--slide-nav-right) + 10px);
        }
    } */

    .swiper-pagination-bullet {
        --swiper-pagination-bullet-size: 12px;
        position: relative;
        transition-property: opacity;
        transition-duration: 200ms;
        transition-timing-function: ease;

        &.swiper-pagination-bullet-active {
            background: var(--color-black-300);
        }

        &.swiper-pagination-bullet-active::after {
            clip-path: inset(0 0 var(--progress) 0);
            transition-duration: 200ms;
        }
    }

    .slide-inner {
        height: 100%;
    }

    .hero-slider__slide-container {
        padding-top: calc(var(--header-client-height) + 60px);
        padding-bottom: 60px;
        display: flex;
        align-items: center;
        height: 100%;
        container-name: slider-container;
        container-type: inline-size;
        background-color: var(--background-color);
        color: var(--color-foreground);
        position: relative;
        overflow: hidden;

        &:has(.slide-template-4) {
            padding-bottom: 70px;
        }

        & > * {
            width: 100%;
        }

        &[data-scheme="orange-pink"] {
            --background-color: var(--color-orange-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-pink-700);
        }

        &[data-scheme="green-blue"] {
            --background-color: var(--color-green-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-blue-700);
        }

        &[data-scheme="pink-orange"] {
            --background-color: var(--color-pink-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-orange-700);
        }

        &[data-scheme="blue-green"] {
            --background-color: var(--color-blue-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-green-700);
        }

        &[data-scheme="dark-blue-pink"] {
            --background-color: var(--color-dark-blue-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-pink-700);
        }

        &[data-scheme="dark-blue-purple"] {
            --background-color: var(--color-dark-blue-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-purple-700);
        }

        &[data-scheme="purple-dark-blue"] {
            --background-color: var(--color-purple-700);
            --color-foreground: var(--color-white);
            --color-shape: var(--color-dark-blue-700);
        }

        /* .hero-block-slide:is(.slide-template-4) {
            padding-block-start: var(--header-scroll-height);
        } */
    }

    .hero-media-content {
        display: flex;
        justify-content: center;

        .hero-image-desktop,
        .hero-image-mobile {
            object-fit: contain;
            border-radius: 20px;
        }

        .hero-image-desktop {
            display: none;
            @media (min-width: 765px) {
                display: block;
            }
        }

        .hero-image-mobile {
            max-block-size: 500px;
            inline-size: auto;
            @media (min-width: 765px) {
                display: none;
            }
        }
    }
}

section.block-hero-slider {
    background-color: white;
    color: var(--color-foreground);
    &:has(.swiper-slide-active [data-scheme="orange-pink"]) {
        --background-color: var(--color-orange-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-pink-700);
    }

    &:has(.swiper-slide-active [data-scheme="green-blue"]) {
        --background-color: var(--color-green-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-blue-700);
    }

    &:has(.swiper-slide-active [data-scheme="pink-orange"]) {
        --background-color: var(--color-pink-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-orange-700);
    }

    &:has(.swiper-slide-active [data-scheme="blue-green"]) {
        --background-color: var(--color-blue-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-green-700);
    }

    &:has(.swiper-slide-active [data-scheme="dark-blue-pink"]) {
        --background-color: var(--color-dark-blue-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-pink-700);
    }

    &:has(.swiper-slide-active [data-scheme="dark-blue-purple"]) {
        --background-color: var(--color-dark-blue-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-purple-700);
    }

    &:has(.swiper-slide-active [data-scheme="purple-dark-blue"]) {
        --background-color: var(--color-purple-700);
        --color-foreground: var(--color-white);
        --color-shape: var(--color-dark-blue-700);
    }
}

section.block-hero-slider .hero-slider__slide-container .hero-block-slide .hero-container {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding-inline: var(--spacing-base-1);
    /* padding-block: 1rem 3rem; */
    position: relative;

    /* @media (min-width: 768px) {
        padding-block-end: 5rem;
    }

    @media (min-width: 1024px) {
        padding-block: 4.25rem;
        padding-block: 4.25rem 7.5rem;
    } */

    @media (min-width: 768px) {
        :where(.slide-template-1, .slide-template-2) & {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* :where(.slide-template-1) & {
            justify-content: space-between;
        } */
    }
    /* @media (min-width: 1024px) {
        :where(.slide-template-2) & {
            justify-content: end;
        }
    } */
}

.hero-block-slide:is(.slide-template-1, .slide-template-2) {
    .hero-media-content {
        @media (min-width: 1024px) {
            position: relative;
            max-width: 50%;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .hero-mask-shape img {
            max-width: 330px;
            mask-image: var(--mask);
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;

            @media (min-width: 768px) {
                max-width: 360px;
            }

            @media (min-width: 880px) {
                max-width: 380px;
            }

            @media (min-width: 1024px) {
                max-width: 400px;
            }

            @media (min-width: 1280px) {
                max-width: 480px;
            }

            @media (min-width: 1380px) {
                max-width: 540px;
            }

            /* @media (min-width: 1520px) {
                max-width: 620px;
            } */

            /* @media (min-width: 1700px) {
                max-width: 670px;
            } */
        }

        .button-container {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            overflow: hidden;

            @media (width >=768px) {
                right: 0;
                margin-right: auto;
                margin-left: auto;
                width: fit-content;
                bottom: 20px;
            }
        }
    }

    .hero-text-content {
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;

        .hero-heading {
            font-size: clamp(3.20625rem, 17.55vw - 5.22rem, 7.5rem);
            /* font-size: clamp(3.20625rem, 17.55vw - 5.22rem, 8.83125rem); */
        }

        .hero-subheading {
            margin-bottom: 0.5rem;
            font-size: clamp(1.1875rem, 1.52vw + 0.475rem, 2.01875rem);
        }

        @media (width >=768px) {
            position: relative;
            z-index: 1;
            margin-bottom: 0;

            .hero-subheading {
                margin-bottom: 1rem;
            }
        }

        .body-large {
            margin-top: 1.5rem;
            max-width: 25rem;
            padding-right: 20px;
        }
        @media (min-width: 460px) {
            .body-large {
                padding-right: 0;
            }
        }
        @media (width >=1024px) {
            .body-large {
                margin-top: 3.5rem;
                max-width: 34rem;
            }
        }

        @media (width >=1280px) {
            .body-large {
                max-width: 40rem;
            }
        }
    }

    .hero-shape {
        position: absolute;
        max-inline-size: 218px;

        @media (min-width: 1024px) {
            max-inline-size: 300px;
            top: 25%;
        }

        @media (min-width: 1280px) {
            max-inline-size: 360px;
        }

        @media (max-width: 319px) {
            display: none;
        }

        /* .slide-template-1 & {
            left: 0;
        } */

        /* .slide-template-2 & {
            right: 0;
        } */
    }

    html.motion-safe & {
        /* .button {
            visibility: hidden;
            transform: translateY(50px);
        } */

        .hero-heading,
        .hero-body {
            visibility: hidden;
        }

        .hero-mask-shape-container,
        .hero-shape {
            visibility: hidden;
        }
    }
}

.hero-block-slide.slide-template-1 {
    .hero-media-content .hero-mask-shape img {
        @media (min-width: 1520px) {
            max-width: 620px;
        }

        @media (min-width: 1700px) {
            max-width: 670px;
        }
    }
}

.hero-block-slide.slide-template-2 {
    .hero-media-content .hero-mask-shape img {
        @media (min-width: 1520px) {
            max-width: 600px;
        }
    }
}

.hero-block-slide {
    html.motion-safe & {
        .button {
            visibility: hidden;
            transform: translateY(50px);
        }
    }
}

.hero-block-slide:is(.slide-template-2) {
    @media (min-width: 768px) {
        .hero-container {
            justify-content: start;
        }
    }

    .hero-media-content {
        @media (min-width: 768px) {
            order: 1;
        }
        @media (min-width: 1024px) {
            justify-content: start;
            max-width: 40%;
        }

        /* .hero-mask-shape {
            @media (min-width: 900px) {
                aspect-ratio: 489 / 625;
            }
        } */
    }

    .hero-text-content {
        @media (min-width: 768px) {
            order: 2;
            flex-grow: 1;
        }
        @media (min-width: 1024px) {
            width: 60%;
        }
        @media (min-width: 1280px) {
            width: 55%;
        }
    }

    .hero-shape {
        right: 0;
    }
}

.hero-block-slide:is(.slide-template-1) {
    .hero-media-content {
        @media (min-width: 1024px) {
            right: 2.5rem;
        }
    }

    .hero-shape {
        left: 0;
    }
}

.hero-block-slide:is(.slide-template-1, .slide-template-2, .slide-template-3, .slide-template-4) {
    /* height: 100%;
    display: flex;
    align-items: center;*/

    .hero-container {
        width: 100%;
    }

    .hero-shape {
        color: var(--color-shape);
    }
}

.hero-block-slide:is(.slide-template-3) {
    position: relative;
    .hero-text-content {
        padding-right: 10px;

        @media (min-width: 768px) {
            padding-right: 0;
        }

        &:has(.button-container) .hero-heading {
            margin-bottom: 50px;
        }

        .hero-heading {
            text-align: center;
            font-size: var(--font-size-h1) !important;
            line-height: var(--line-height-h1) !important;

            .hero-subheading {
                margin-bottom: 0.5rem;
            }

            @media (min-width: 1024px) {
                .hero-subheading {
                    margin-bottom: 1rem;
                }
            }
        }

        .button-container {
            display: flex;
            justify-content: center;
        }
    }

    .hero-shape {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 735px;
        height: auto;

        &.hero-shape-1 {
            width: 350px;
        }
        @media (min-width: 1024px) {
            &.hero-shape-1 {
                width: 480px;
            }
        }

        &.hero-shape-2 {
            width: 520px;
        }

        &.hero-shape-4 {
            width: 550px;
        }

        &:is(.hero-shape-6, .hero-shape-7) {
            width: 500px;
        }
    }
}

.hero-block-slide:is(.slide-template-4) {
    .hero-container {
        div {
            position: relative;
            @media (min-width: 1200px) {
                max-width: 1100px;
                margin-inline: auto;
            }

            .button-container {
                position: absolute;
                bottom: -20px;
                right: 0;
                left: 0;
                text-align: center;

                @media (min-width: 1024px) {
                    left: unset;
                    right: 10%;
                    z-index: 1;
                }
            }
        }
    }
}

.sidebar-container {
    padding-bottom: calc(var(--padding-top) * 2);
}

.country-selector.weglot-dropdown ul li a {
    color: var(--color-black);
}

.swiper-wrapper {
    &:has(:last-child.swiper-slide-active) {
        .swiper-slide:not(:last-child) .slide-inner {
            border-radius: 0 0 0 0;
        }
    }
}

.swiper-slide {
    .slide-inner {
        transform-origin: center top;
        transition-property: clip-path, transform, border-radius;
        transition-duration: 1400ms;
        transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
        overflow: hidden;
        will-change: clip-path, transform, border-radius;
        border-radius: 750px 750px 0 0;
    }

    /* &.swiper-slide-next .slide-inner,
    &.swiper-slide-next + .swiper-slide .slide-inner {
        border-radius: 750px 750px 0 0;
    } */

    &.swiper-slide-active .slide-inner,
    &.swiper-slide-prev .slide-inner,
    &:first-of-type .slide-inner {
        border-radius: 0 0 0 0;
    }

    .hero-block-slide {
        opacity: 0;
        transition-property: opacity;
        transition-duration: 700ms;
        transition-timing-function: ease;
    }

    &.swiper-slide-active .hero-block-slide {
        opacity: 1;
    }
}
