@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

html,
body {
    margin     : 0;
    padding    : 0;
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-weight: 500;
    font-size: 3.5em;
    line-height: 1;
}

p {
    line-height: 1.6;
    font-size: 1.05em;
    font-weight: 400;
    color: #555;
}

#container {
    height               : 100vh;
    display              : grid;
    grid-template-rows   : 1fr 1fr 1fr;
    grid-template-columns: 100%;
    grid-template-areas  :
        "header"
        "main"
        "footer"
    ;
}

header,
footer {
    display              : grid;
    grid-template-rows   : 1fr 1fr;
    grid-template-columns: 100%;
    grid-template-areas  :
        "left-site"
        "left-site"
    ;
}

main {
    display              : grid;
    grid-template-rows   : 1fr 1fr;
    grid-template-columns: 100%;
    grid-template-areas  :
        "right-site"
        "left-site"
    ;
}

header {
    grid-area: header;
}

#logo {
    width: 150px;
    margin: 25px 0;
}

main {
    grid-area: main;
}

#left-site {
    grid-area: left-site;
}

.email-info {
    color: #999999;
}

#right-site {
    grid-area : right-site;
    background: #00b7ff;
}

footer {
    grid-area: footer;
    font-size: 12px;
}

.wrapper {
    margin: 8px 20px;
}

@media screen and (min-width: 44.001em) {
    #container {
        grid-template-rows   : 300px 1fr 50px;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-areas  :
            "header header header header"
            "main main main main"
            "footer footer footer footer"
        ;
    }

    header,
    main,
    footer {
        grid-template-rows   : 1fr 1fr;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-areas  :
            "left-site left-site right-site right-site"
            "left-site left-site right-site right-site"
            "left-site left-site right-site right-site"
        ;
    }

    .wrapper {
        margin: 8px 105px;
    }
    
}