* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #231f20;
    min-height: 100vh;
    /* overflow: hidden; */
}

a {color: #5f8b76;}

.wrapper {padding: 0 15%; margin: 0 auto; display: flex; flex-wrap: wrap; height: 100vh;}
.left {flex: 0 0 60%; max-width: 60%; min-height: 100vh;}
.left .content {padding: 15% 0;}
.left .content .logo {margin-bottom: 65px;}
.left .content h1 {font-family: 'La Belle Aurore', cursive; font-size: 65.23px; color: #5f8b76; line-height: 70px; margin-bottom: 40px;}
.left .content p {font-size: 20px; line-height: 32px; color: #231f20; margin-bottom: 50px;}
.left .content .contacts a {display: block; font-size: 32px; text-decoration: none; margin-bottom: 10px;}
.left .content .block {max-width: 500px;}
.right {flex: 0 0 40%; max-width: 40%;}
.right .picture {position: relative; max-width: 516px; height: 100vh; overflow: hidden;}
.right .picture img {position: absolute; left: 0; top: 10%; width: 100%; height: 100%; object-fit: contain; object-position: left top;}

@media only screen and (min-width:320px) and (max-width:767px) {
    body {overflow: auto;}
    .wrapper {padding: 5%; height: auto; position: relative; overflow: hidden;}
    .left, .right {flex: 0 0 100%; max-width: 100%; height: auto;}
    .left .content {height: auto; padding: 0;}
    .left .content .logo {max-width: 150px; margin-bottom: 50px;}
    .left .content .logo img {max-width: 100%;}
    .left .content h1 {font-size: 40px; line-height: 1.2;}
    .left .content .contacts a {font-size: 24px;}
    .right {position: absolute; right: -70px; top: -30px;}
    .right .picture {max-width: 200px; position: relative; transform: scaleX(-1); padding: 0; margin: 0;}
    .right .picture img {position: relative; opacity: 0.5; top: 0;}
}