.f-image-comparison {
    position: relative;
    display: block;
    overflow: hidden
}

.f-image-comparison[data-animation] {
    --percent: 95%
}

@media screen and (min-width: 768px) {
    .f-image-comparison[data-animation] {
        --percent: 98%
    }
}

.f-image-comparison[is-visible] {
    --percent: 50%
}

.f-image-comparison--media {
    display: block;
    position: relative;
    overflow: hidden;
    background: #f3f3f3;
    pointer-events: none
}

.f-image-comparison__after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

[data-layout=horizontal] .f-image-comparison__after {
    clip-path: inset(0px 0px 0px var(--percent, 50%))
}

[data-layout=vertical] .f-image-comparison__after {
    clip-path: inset(var(--percent, 50%) 0px 0px 0px)
}

.f-image-comparison__before .f-placeholder-svg {
    background-color: rgba(0, 0, 0, .4392156863)
}

.f-image-comparison__button {
    position: absolute;
    z-index: 2;
    color: inherit;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: none
}

.f-image-comparison__button svg {
    width: 12px;
    color: var(--color-text-body)
}

.f-image-comparison__button::after, .f-image-comparison__button::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--bg-white), 1);
    pointer-events: none
}

[data-layout=horizontal] .f-image-comparison__button::after, [data-layout=horizontal] .f-image-comparison__button::before {
    width: 5px;
    height: 50%;
    left: 50%;
    margin-left: -2.5px
}

[data-layout=vertical] .f-image-comparison__button::after, [data-layout=vertical] .f-image-comparison__button::before {
    width: 50%;
    height: 5px;
    top: 50%;
    margin-top: -2.5px
}

[data-layout=horizontal] .f-image-comparison__button::before {
    top: 0;
    margin-top: -20px
}

[data-layout=vertical] .f-image-comparison__button::before {
    left: 0;
    margin-left: -20px
}

[data-layout=horizontal] .f-image-comparison__button::after {
    bottom: 0;
    margin-bottom: -20px
}

[data-layout=vertical] .f-image-comparison__button::after {
    right: 0;
    margin-right: -20px
}

[data-layout=horizontal] .f-image-comparison__button {
    top: 0;
    left: var(--percent, 50%);
    width: 28px;
    height: 100%;
    margin-left: -14px;
    cursor: col-resize
}

[data-layout=vertical] .f-image-comparison__button {
    left: 0;
    top: var(--percent, 50%);
    width: 100%;
    height: 28px;
    margin-top: -14px;
    cursor: row-resize
}

.f-image-comparison__button span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border-radius: 40px;
    background-color: rgba(var(--bg-white), 1);
    color: rgba(var(--text-black), 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 21px 24px rgba(0, 0, 0, .15)
}

[data-layout=vertical] .f-image-comparison__button span {
    transform: rotate(90deg)
}

.f-image-comparison__animation {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .1rem;
    pointer-events: none
}

.f-image-comparison.f-animating .f-image-comparison__after {
    transition-property: clip-path;
    transition-duration: 1s;
    transition-timing-function: ease
}

.f-image-comparison.f-animating .f-image-comparison__button {
    transition-property: top, left;
    transition-duration: 1s;
    transition-timing-function: ease
}

.f-image-comparison__product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    flex-wrap: wrap;
    column-gap: 20px
}

.f-image-comparison--small {
    --hero-height: 290px
}

.f-image-comparison--medium {
    --hero-height: 360px
}

.f-image-comparison--large {
    --hero-height: 420px
}

@media screen and (min-width: 768px) {
    .f-image-comparison--small {
        --hero-height: 420px
    }

    .f-image-comparison--medium {
        --hero-height: 560px
    }

    .f-image-comparison--large {
        --hero-height: 720px
    }
}

.f-image-comparison__wrapper {
    height: var(--hero-height)
}

.f-image-comparison__wrapper img, .f-image-comparison__wrapper svg {
    display: block;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover
}

@media screen and (max-width: 767px) {
    .f-image-comparison__wrapper.has-mobile-image .f-image-comparison__image-desktop {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .f-image-comparison__image-mobile {
        display: none !important
    }
}

.f-image-comparison__heading {
    position: absolute;
    z-index: 2;
    background: rgba(var(--bg-white), 1);
    color: rgba(var(--text-black), 1);
    padding: 8px 20px;
    top: 20px;
    left: 20px;
    min-width: 80px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    line-height: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--f-duration-default, 0.25s) ease;
    box-shadow: 0 21px 24px rgba(0, 0, 0, .1490196078);
    letter-spacing: .05rem
}

.f-image-comparison__after .f-image-comparison__heading {
    left: auto;
    right: 20px
}

.image-comparing .f-image-comparison__heading {
    opacity: 0;
    visibility: hidden
}

.f-image-comparison[data-layout=vertical] .f-image-comparison__after .f-image-comparison__heading {
    left: 20px;
    right: auto;
    bottom: 20px;
    top: auto
}