.lignia-hero {
    --lh-color: #fff;
    --lh-solid: rgba(255, 255, 255, 1);
    --lh-clear: rgba(255, 255, 255, 0);
    --lh-image-start: 48%;
    --lh-content-width: 46%;
    --lh-gradient-start: 34%;
    --lh-gradient-end: 72%;
    --lh-container-max: 1280px;
    --lh-min-height-desktop: 560px;
    --lh-min-height-tablet: 500px;
    --lh-min-height-mobile: 0px;
    --lh-padding-y: 72px;
    --lh-padding-x: 32px;
    --lh-mobile-image-height: 300px;
    --lh-image-position: center center;

    position: relative;
    isolation: isolate;
    min-height: var(--lh-min-height-desktop);
    overflow: hidden;
    background: var(--lh-color);
}

.lignia-hero--width-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

.lignia-hero--width-parent {
    width: 100%;
}

.lignia-hero__image,
.lignia-hero__gradient {
    position: absolute;
    inset: 0;
}

.lignia-hero__image {
    z-index: 0;
    left: var(--lh-image-start);
    overflow: hidden;
}

.lignia-hero__picture,
.lignia-hero__img {
    display: block;
    width: 100%;
    height: 100%;
}

.lignia-hero__img {
    object-fit: cover;
    object-position: var(--lh-image-position);
}

.lignia-hero--no-image .lignia-hero__image {
    display: none;
}

.lignia-hero__gradient {
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--lh-solid) 0%,
        var(--lh-solid) var(--lh-gradient-start),
        var(--lh-clear) var(--lh-gradient-end),
        var(--lh-clear) 100%
    );
}

.lignia-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--lh-container-max);
    min-height: inherit;
    margin: 0 auto;
    padding-right: var(--lh-padding-x);
    padding-left: var(--lh-padding-x);
}

.lignia-hero__content {
    width: var(--lh-content-width);
    max-width: 100%;
    padding-top: var(--lh-padding-y);
    padding-bottom: var(--lh-padding-y);
}

.lignia-hero__content > :first-child,
.lignia-hero__content > :first-child > :first-child {
    margin-top: 0;
}

.lignia-hero__content > :last-child,
.lignia-hero__content > :last-child > :last-child {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .lignia-hero {
        min-height: var(--lh-min-height-tablet);
    }

    .lignia-hero__content {
        width: min(54%, var(--lh-content-width));
    }
}

@media (max-width: 767px) {
    .lignia-hero {
        min-height: var(--lh-min-height-mobile);
    }

    .lignia-hero__inner {
        min-height: var(--lh-min-height-mobile);
        padding-right: max(20px, var(--lh-padding-x));
        padding-left: max(20px, var(--lh-padding-x));
    }

    .lignia-hero__content {
        width: 100%;
        padding-top: clamp(40px, var(--lh-padding-y), 72px);
        padding-bottom: clamp(40px, var(--lh-padding-y), 72px);
    }

    .lignia-hero--mobile-stack {
        display: flex;
        flex-direction: column;
    }

    .lignia-hero--mobile-stack .lignia-hero__inner {
        order: 1;
        background: var(--lh-color);
    }

    .lignia-hero--mobile-stack .lignia-hero__image {
        position: relative;
        inset: auto;
        order: 2;
        width: 100%;
        height: var(--lh-mobile-image-height);
    }

    .lignia-hero--mobile-stack .lignia-hero__image::before {
        position: absolute;
        z-index: 1;
        inset: 0;
        content: "";
        pointer-events: none;
        background: linear-gradient(180deg, var(--lh-solid) 0%, var(--lh-clear) 28%);
    }

    .lignia-hero--mobile-stack .lignia-hero__gradient {
        display: none;
    }

    .lignia-hero--mobile-background .lignia-hero__image {
        left: 0;
    }

    .lignia-hero--mobile-background .lignia-hero__gradient {
        background: linear-gradient(
            90deg,
            var(--lh-solid) 0%,
            color-mix(in srgb, var(--lh-solid) 82%, transparent) 65%,
            color-mix(in srgb, var(--lh-solid) 58%, transparent) 100%
        );
    }

    @supports not (background: color-mix(in srgb, white 50%, transparent)) {
        .lignia-hero--mobile-background .lignia-hero__gradient {
            background: linear-gradient(90deg, var(--lh-solid) 0%, var(--lh-solid) 72%, var(--lh-clear) 140%);
        }
    }

    .lignia-hero--mobile-hidden .lignia-hero__image,
    .lignia-hero--mobile-hidden .lignia-hero__gradient {
        display: none;
    }
}