/* общие настройки для всего контейнера */
.sl-container {
    /* рисуем границу */
    border: 0px solid #fff;
    /* добавляем отступы */
    margin: 5px auto;
    /* то, что не помещается в блок, — скрываем */
    overflow: hidden;
    /* используем относительное позиционирование */
    position: relative;
    /* устанавливаем высоту и ширину блока */
    width: min(90vh, 90vw);
    height: min(65vh, 65vw);
    /* ограничиваем всё размерами блока */
    box-sizing: border-box;
}

/* настройки блоков с картинками */
.sl-container .view {
    /* включаем абслютное позиционирование */
    position: absolute;
    /* сдвигаем всё в левый верхний угол */
    top: 0;
    left: 0;
    /* то, что не помещается в блоке — скрываем */
    overflow: hidden;
    cursor: pointer;
}

/* настройки картинок в блоке .view */
.sl-container .view img {
    /* ширина картинок совпадает с шириной блока */
    width: min(90vh, 90vw);
}


/* настройки картинки слева */
.sl-container .view-after {
    /* показываем только половину */
    width: min(45vh, 45vw);
    /* и виртуально кладём её выше, чем картинку справа */
    z-index: 200;
}

/* настройки слайдера */
.sl-container .dragme {
    /* включаем абслютное позиционирование */
    position: absolute;
    /* ширина разделителя */
    width: 3px;
    /* на всю высоту блока */
    height: 100%;
    /* начинается сверху блока */
    top: 90px;
    /* делит картинки пополам, потому что общая ширина у них 90vh */
    left: min(45vh, 45vw);
    /* цвет фона */

    /* меняем форму курсора */
    cursor: pointer;
    /* поднимаем слайдер выше картинок */
    z-index: 300;
    margin-left: 0em;
    font-size: 28px;
    line-height: 40px;
    color: #fff;

}

/* кругляш на слайдере */
.sl-container .dr-circle {
    /* включаем абсолютное позиционирование */
    position: absolute;
    /* высчитываем позицию сверху, чтобы поставить его посередине */
    top: 150px;
    /* сдвигаем влево, так как круг рисуется слева направо, а не из центра */
    right: 88px;
    /* превращаем фигуру в круг */
    border-radius: 100%;
    /* высота и ширина */
    width: 40px;
    height: 40px;
    /* меняем форму курсора */
    cursor: pointer;
    /* делаем на той же виртуальной высоте, что и полоска слайдера */
    z-index: 300;
    margin-right: 0em;
    font-size: 28px;
    line-height: 40px;
    color: #fff;
}