.omt-before-after__details {
    width: 50%;
}

.omt-before-after__heading {
    text-align: center;
}

.omt-before-after__title {
    margin-bottom: var(--wp--preset--spacing--30);
}

.omt-before-after__block {
    width: 50%;
}

.omt-before-after__full-width .omt-before-after__details {
    width: 100%;
}

.omt-before-after__full-width .omt-before-after__block {
    width: 100%;
}

.omt-before-after__full-width.omt-before-after__wrapper {
    flex-direction: column;
    text-align: center;
}

.omt-before-after__full-width .omt-before-after__block-main {
    height: 600px;
}

.omt-before-after__block-main {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

.omt-before-after__before-img,
.omt-before-after__after-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.omt-before-after__before-img img,
.omt-before-after__after-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.omt-before-after__after-img {
    width: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.omt-before-after__after-img {
    clip-path: inset(0 50% 0 0);
    /* initial 50% visible */
    transition: clip-path 0s ease-out;
}

.omt-before-after__before-img {
    z-index: 1;
}

.omt-before-after__handle {
    position: absolute;
    top: 0;
    left: calc(50% - 4px);
    width: 4px;
    height: 100%;
    background: var(--wp--preset--color--base);
    border-left: 2px solid var(--wp--preset--color--contrast);
    border-right: 2px solid var(--wp--preset--color--contrast);
    z-index: 3;
}

.omt-before-after {
    padding: var(--wp--preset--spacing--60) 0;
}

.omt-before-after__wrapper {
    display: flex;
    gap: var(--wp--preset--spacing--50);
    margin-top: var(--wp--preset--spacing--60);
}

.omt-before-after__full-width.omt-before-after__wrapper {
    margin-top: 0;
}

.omt-before-after__txt {
    margin-bottom: var(--wp--preset--spacing--30);
}

.omt-before-after__handle::before {
    content: '';
    width: 40px;
    height: 40px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23fff"><path d="M406.6 374.6l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224l-293.5 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288l293.5 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>');
    background-color: var(--wp--preset--color--contrast);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    left: -20px;
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--base);
}

.omt-before-after__label {
    padding: 1px var(--wp--preset--spacing--10);
    z-index: 3;
    position: absolute;
    background: var(--wp--preset--color--base);
    text-transform: capitalize;
}

.omt-before-after__label-before.omt-before-after__label {
    right: 10px;
    top: 10px;
}

.omt-before-after__label-after.omt-before-after__label {
    left: 10px;
    top: 10px;
}

@media (max-width:1200px) {
    .omt-before-after__full-width .omt-before-after__block-main {
        height: 500px;
    }
}

@media (max-width:992px) {
    .omt-before-after__wrapper {
        flex-direction: column-reverse;
    }

    .omt-before-after__details {
        width: 100%;
    }

    .omt-before-after__block {
        width: 100%;
    }

    .omt-before-after__full-width .omt-before-after__block-main {
        height: 400px;
    }
}

@media (max-width:575px) {
    .omt-before-after__block-main {
        height: 300px;
    }

    .omt-before-after__full-width .omt-before-after__block-main {
        height: 300px;
    }
}