.intro-image {
    background-color: var(--background-color);
}
.intro-image .container {
    max-width: initial;
}
.intro-image .image_wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.intro-image .image_wrapper figure {
    max-width: 100%;
    position: relative;
    display: inline-flex;
    mask-image: url('/theme/public/assets/frontend/img/svg/intro-mask-mobile.svg');
    mask-size: 100%;
    height: auto;
    mask-repeat: no-repeat;
}
.intro-image .image_wrapper figure img {
    position: relative;
    margin: 0 auto;
    border-radius: 0;
}

.intro-image.white-background {
    background-color: #fff;
}

@media(min-width: 768px) {
    .intro-image .image_wrapper figure {
        mask-image: url('/theme/public/assets/frontend/img/svg/intro-mask.svg');
    }
}
@media(min-width: 1124px) {
    .intro-image .image_wrapper figure::before,
    .intro-image .image_wrapper figure::after {
        content: "";
        width: clamp(0rem, -48.3871rem + 64.5161vw, 12.5rem);
        background: #F1F0EE;
        background: linear-gradient(90deg, var(--background-color) 0%, var(--background-color-transparent) 100%);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
    }
    .intro-image .image_wrapper figure::after {
        right: 0;
        left: initial;
        background: #F1F0EE;
        background: linear-gradient(90deg, var(--background-color-transparent) 0%, var(--background-color) 100%);
    }
    .intro-image.white-background .image_wrapper figure::before,
    .intro-image.white-background .image_wrapper figure::after {
        background: #FFFFFF;
        background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    }
    .intro-image.white-background .image_wrapper figure::after {
        background: #FFFFFF;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    }
}