.container {
            display: flex;
            flex-direction: column;
            margin: 0;
            height: 100vh;
        }
        .frame {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            margin-top: 1.5em;
            margin-bottom: 1em;
        }
        .left-frame {
            flex: 0 0 450px;
            position: relative;
        }
        .right-frame {
            flex: 1;
            margin-left: 10px;
        }

        .image-slider {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .image-slider img {
            width: 100%;
            height: auto;
            display: none;
        }
        .image-slider img.active {
            display: block;
        }
        .buttons {
            position: relative;
            left: 30px; top: -33px;
            /*bottom: 10px;*/
            left: 50%;
            transform: translateX(-50%);
        }
        .button {
            border: #FFFFFF solid 2px;
            /*background-color:  #EBFFEF;*/
            border-radius: 50%;
            width: 30px;
            height: 30px;
            margin: 1px 5px;
            cursor: pointer;
        }

        @media (max-width: 790px) {
            .frame {
                flex-direction: column;
            }
            .left-frame {
                flex: 1;
                max-width: 100%;
            }
            .right-frame {
                flex: 1;
                margin-left: 0;
                margin-top: 10px;
            }
        }