Проблема с адаптацией экрана при включении "версии для ПК" в мобильном браузере

*,*:before,*:after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
html,body {
    background: #e4e4e4;
    height: 100%;
}

p {font-size: 16px; margin: 0;}
h1 {font-size: 500%; margin: 0;}
h2 {font-size: 400%; margin: 0;}
h3 {font-size: 300%; margin: 0;}
h4 {font-size: 250%; margin: 0;}
h5 {font-size: 200%; margin: 0;}
h6 {font-size: 150%; margin: 0;}

a {
    text-decoration: none;
    color: #0172b2;
} 

ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

ol, li {margin: 0;}

article {position: relative;}

.wrapper {
    display: flex;
    width: auto;
    margin: 0 auto;
    max-width: 2560px;
}

.main-section {
    width: 100%;
    background-color: #e4e4e4;
    padding: 0;
    margin: 0;
}

.rectangle-gray,
.rectangle-blue,
.rectangle-img {
    position: absolute;
    height: 100%; 
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    background-color: silver;
}

.rectangle-blue {
    background-color: #0cbcf5;
}

.rectangle-img { 
    width: 40%;
    left: 10%;
    background: url(../images/doctor-main.png) bottom center no-repeat;
    background-size: contain;
}

.rectangle-txt {
    position: relative;
    background-color: white;
    border: 0.1em outset black;
    overflow: hidden;
    padding: 2em;
    text-align: justify;
    box-sizing: border-box;
    background-color: white;
}

.button-1 {
    position: relative; 
    float: right;
    color: white;
    cursor: pointer;
    line-height: 2em;
    border-radius: 0.5em;
    border: 0.3em double white;
    outline: none;
    font-weight: bold;
    font-size: 100%;
    padding: 0 2em;
    text-transform: uppercase;
    background-color: #054a71;
}

.button-1:hover {background-color: #0cbcf5;}

.button-1:active {background-color: #054a71;}

.post {
    position: relative;
    text-align: center;
}

.post p,
.post h5 {padding: 0 2em;}

#post-index img {
    margin-top: 2em;
    margin-right: 60%;
}

#post-index p {
    padding: 2em;
    margin-right: 60%;
    text-align: justify;
}

.blue-circle {
    position: relative;
    width: 9em;
    height: 9em;
    border-radius: 50%;
    background-color: #0cbcf5;
    background-size: 75%;
}

#img-index {
    position: absolute;
    height: 100%;
    width: 60%;
    top: 0;
    right: 0;
    background-color: green;
}

.footer {
    clear: both;
    color: white;
    border-top: 0.1em solid white;
    text-align: center;
    background-color: black;
    padding: 1em 0;
    position: relative;
}

.pad-h-2em {padding: 2em 0;}

.rect-w-35-r-15 {
    width: 35%;
    left: 50%;
}

.rect-w-70-l-10 {
    width: 70%;
    left: 10%;
}

.rect-w-95l-h-70 {
    height: 70%;
    width: 95%;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);   
}

@media screen and (max-width: 1280px) {
    .rect-w-35-r-15 {width: 40%;}
    .rect-w-70-l-10 {width: 75%}
}

@media screen and (max-width: 1150px) {
    .rect-w-70-l-10 {width: 80%}
    .rect-w-95l-h-70 {width: 100%;}
    .rectangle-img {
        left: 5%;
        width: 45%;
    }
    .rect-w-35-r-15 {
        left: 45%;
        width: 50%;
    } 
    .footer p {margin-top: 0.5em;}
}

@media screen and (max-width: 980px) {
    .wrapper {
        display: block;
        width: auto;
    }
    .main-section {width: auto;}
    .pad-h-2em {padding: 0;}
    .rect-w-35-r-15 {left: 50%;}
    .rectangle-txt {padding: 1.5em;}
    .rectangle-img {
        left: 0%;
        width: 50%;
    }
    #post-index p {padding: 1.5em;}
}

@media screen and (max-width: 800px) {
    .rectangle-img {
        position: relative;
        height: 30em;
        width: 100%;
    }
    .rect-w-70-l-10,
    .rect-w-35-r-15 {
        left: 0;
        width: 100%;
    }
    #post-index img,
    #post-index p {margin-right: 0;}
    #img-index {
        position: relative;
        width: 100%;
        height: 30em;
    }
}

@media screen and (max-width: 660px) {
    h1 {font-size: 300%;}
    h2 {font-size: 275%;}
    h3 {font-size: 250%;}
    h4 {font-size: 225%;}
    h5 {font-size: 200%;}
    h6 {font-size: 150%;}
    .button-1 {padding: auto;}
    .rectangle-img {height: 30em;}
}

@media screen and (max-width: 460px) {
    .rectangle-txt {padding: 1em;}
    .button-1 {
        float: none;
        margin: 1em auto 1em 50%;
        transform: translate(-50%,0);
    }
    #post-index p {padding: 1em;}
}

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Test</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie-edge"/>
        <link rel="stylesheet" href="style.css"/>   
    </head>
    <body>
        <section class="wrapper">
            <section class="main-section">
                <article class="pad-h-2em">
                    <div class="rectangle-gray rect-w-70-l-10"></div>
                    <div class="rectangle-blue rect-w-95l-h-70"></div>
                    <div class="rectangle-txt rect-w-35-r-15">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                        <br>
                        <form action="#">
                            <button class="button-1" type="submit">button</button>
                        </form>
                    </div>
                    <div class="rectangle-img"</div>
                </article>
                <article class="post bw" id="post-index">
                    <img class="blue-circle"></img>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <div id="img-index"></div>
                </article>
            </section> <!-- main section -->
        </section> <!-- wrapper -->
        <footer>
            <div class="footer">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </footer>
    </body>
</html>