.before-and-after {
    position: relative;
    overflow: hidden;

    .before-and-after__img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background-size: 900px 100%;*/
        background-size: cover;
    }

    .before-and-after__img--foreground {
        width: 49.5%;
    }

    .before-and-after__slider {
        position: absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 100%;
        background: rgba(242, 242, 242, 0.3);
        outline: none;
        margin: 0;
        transition: all 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
            background: rgba(242, 242, 242, 0.1);
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 6px;
            height: 2000px;
            background: white;
            cursor: pointer;
        }

        &::-moz-range-thumb {
            width: 6px;
            height: 2000px;
            background: white;
            cursor: pointer;
        }
    }

    .slider-button {
        pointer-events: none;
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: white;
        left: calc(50% - 18px);
        top: calc(50% - 18px);
        display: flex;
        justify-content: center;
        align-items: center;

        &:after,
        &:before {
            content: '';
            padding: 3px;
            display: inline-block;
            border: solid #5d5d5d;
            border-width: 0 2px 2px 0;
        }

        &:after {
            transform: rotate(-45deg);
        }

        &:before {
            transform: rotate(135deg);
        }
    }
}