html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}


/* Главный контейнер */
.FON {
    width: 100%;
    height: 100vh;
}


/* Контейнер двух изображений */
.diagonal-image {

    --top-point: 65%;
    --bottom-point: 35%;
    --line-width: 4px;

    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #111;
}


/* Общие настройки изображений */
.image-left,
.image-right {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.8s ease,
                filter 0.8s ease;
}


/* Левая часть */
.image-left {

    clip-path: polygon(
        0 0,
        var(--top-point) 0,
        var(--bottom-point) 100%,
        0 100%
    );

}


/* Правая часть */
.image-right {

    clip-path: polygon(
        var(--top-point) 0,
        100% 0,
        100% 100%,
        var(--bottom-point) 100%
    );

}


/* Линия разделения */
.diagonal-line {

    position: absolute;

    inset: 0;

    background: rgba(255,255,255,0.9);

    clip-path: polygon(
        calc(var(--top-point) - 5px) 0,
        calc(var(--top-point) + 5px) 0,
        calc(var(--bottom-point) + 5px) 100%,
        calc(var(--bottom-point) - 5px) 100%
    );

    pointer-events: none;

}


/* Эффект наведения на левую часть */
.image-left:hover {

    transform: scale(1.04);

    filter: brightness(1.1);

}


/* Эффект наведения на правую часть */
.image-right:hover {

    transform: scale(1.04);

    filter: brightness(1.1);

}


/* Затемнение по краям для глубины */
.diagonal-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.15),
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,0.35)
        );

}


/* Мобильные устройства */
@media (max-width: 700px) {

    .diagonal-image {

        --top-point: 55%;
        --bottom-point: 45%;

    }


    .image-left,
    .image-right {

        object-position: center;

    }

}