.image {
    --width: 417px;
    --height: 460px;
    position: relative;
    width: var(--width);
    height: var(--height);
    overflow: hidden;
}

.image__img {
    position: absolute;
    height: 100%;
    border-radius: 50px;
}

    .image__img:first-child {
        background: url("/img/woman bad resized.jpg");
        left: 0;
        width: 100%;
        background-position: center left;
        background-size: var(--width) var(--height);
        filter: grayscale(100%);
    }

    .image__img:last-child {
        background: url("/img/woman good resized.jpg");
        background-size: var(--width) var(--height);
        right: 0;
        width: calc(100% - var(--x, 0%));
        background-position: center right;
        border-top-left-radius: 50px;
        box-shadow: inset 2px 0 0 #FFF, -2px 0 0 #FFF;
    }

.tw__header__container {
    position: relative;
    z-index: 1;
}

.tw__header__img-col {
    z-index: 300;
    display: flex !important;
}

@media (max-width: 992px) {
    .tw__header__img-col {
        display: none !important;
    }
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(86, 127, 191, 0.1294117647);
        animation: animate 25s linear infinite;
        bottom: -150px;
        pointer-events: none;
    }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }

        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 18s;
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 11s;
        }

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}