/* media sizes: widthPx/16 = widthEm */
@media only screen and (min-width: 40.063em) {
    article {
        padding: 0;
        width: fit-content;
    }
    section {
        width: fit-content;
    }
    html {
        /*font-size: 100%;*/
    }
    body {
        display: grid;
        grid-template-areas:
        "bx-panel bx-panel bx-panel"
        "header header header"
        "main-img main-img main-img"
        "two content content"
        "insta insta insta"
        "three four four"
        "contacts contacts contacts"
        "footer footer footer";
        gap: 10px;
        padding: 0 0 2em 0;
    }
    .header {
        grid-area:header;
        display: grid;
        grid-template-areas:
    "logo area1 area2 area3";
    }
    .wideimg__main {
        grid-area: main-img;
        position: relative;
    }
    .footer {
        margin-top: 20px;
    }
    .phone {
        /*grid-area: phones1;*/
        align-items: center;
        height: 100%;
        display: grid;
        min-height: 3em;
        text-align: center;
        line-height: 1em;
        position: relative;
}

    .phone1 {
        grid-area: area1;
    }
    .phone2 {
        grid-area: area2;
    }
    .phone3 {
        /*top: 0;*/
        grid-area: area3;
    }
    .banner {
        min-width: 15vw;
        height: 100%;
        /*outline: 1px solid #808080;*/
        box-shadow: 5px 6px 9px 0px #a4a4a4;
    }

    .banner1 {
        grid-area: three;
    }
    .banner2 {
        grid-area: four;
    }
    .menu {
        grid-area: two;
        min-width: 10rem;
        text-align: left;
        /*box-shadow: 5px 6px 9px 0px #d7d7d7;*/

    }
    .content {
        grid-area: content;
        min-width: 24em;
    }
    h1 {
        /*margin-top: 0;*/
    }
    .contacts {
        grid-area: four;
        padding: 0 0 2em 0;
        align-self: end;
        text-align: center;
        z-index: 10;
        border-top: thin solid #5d5d5d;
        background: var(--banner2-bg);
        height: 100%;
    }
    .contacts img {
        width: fit-content;
        height: fit-content;
    }
    .phones-open {
        display: none;
    }
    .menumob {
        display: none;
    }
    body.table .menu {
        /*посчитать ширину таблицы в пикселях
        и указать минимальную для content
        а не извращаться так */
        max-width: 15rem;
    }
    pre.code {
        height: 50vh;
        overflow: auto;
        overscroll-behavior:none;
    }
    .wideimg.main .description {
        position: absolute;
        top: 30%;
        background: #ffffff88;
        padding: 1em 2em;
        left: 5%;
        font-size: 1rem;
        color: black;
        font-weight: 200;
        max-width: 90%;
    }
    .wideimg.main .description h1 {
        font-size: 1.3em;
    }
}

@media screen AND (min-width: 40.063em) AND (max-width: 800px) {

}
/*601 - 1024*/
@media screen AND (min-width: 40.063em) AND (max-width: 64em) {
    .banner {
        max-width: 100%;
        width: 100%;
    }
    .menu {
        margin-top: 10px;
        min-width: 13em;
    }
    .contacts {
        grid-area: contacts;
    }

}
@media screen AND (min-width: 64.063em) {
    body {
        grid-template-areas:
        "bx-panel bx-panel bx-panel"
        "header header header"
        "main-img main-img main-img"
        "two content three"
        "insta insta insta"
        "four four contacts"
        "footer footer footer";
    }
}
@media screen AND (min-width: 64.063em) AND (max-width: 80em) {
    body {
        display: grid;
        grid-template-areas:
        "bx-panel bx-panel bx-panel"
        "header header header"
        "main-img main-img main-img"
        "two content three"
        "insta insta insta"
        "four four contacts"
        "footer footer footer";
        gap: 20px;
    }
    .contacts {
        grid-area: contacts;
    }
    .banner2 {
        max-width: 100%;
        width: 100%;
    }
    body.table {
        display: grid;
        grid-template-areas:
        "bx-panel bx-panel"
        "header header"
        "main-img main-img"
        "two content"
        "three three"
        "insta insta"
        "four contacts"
        "footer footer";
        gap: 10px;
    }
    body.table .menu {
        margin-top: 10px;
    }
    .wideimg.main .description {
        font-size: 1.3rem;
    }
}
@media screen AND (min-width: 80.0625em)  {
    /*.wideimg.main .description */
    body {
        top: 20%;
        grid-template-areas:
        "bx-panel bx-panel bx-panel"
        "header header header"
        "main-img main-img main-img"
        "two content three"
        "insta insta insta"
        "four four contacts"
        "footer footer footer";
    }
}
@media screen AND (min-width: 80.0625em) AND (max-width: 96em) {
    body {
        display: grid;
        gap: 20px;
    }
    .contacts {
        grid-area: contacts;
    }
    .banner2 {
        max-width: 100%;
        width: 100%;
    }
    .wideimg.main .description {
        top: 10%;
        left: 7%;
        max-width: 26%;
        font-size: 1.5rem;
    }
}
@media screen AND (min-width: 96.0625em) {
    body {
        grid-template-areas:
        "bx-panel bx-panel bx-panel bx-panel"
        "header header header header"
        "main-img main-img main-img main-img"
        "two content three four"
        "insta insta insta insta"
        "footer footer footer footer";
        gap:1.2em;
    }
    .contacts {
        height: unset;
        background: #2f4f4f;
    }
    body.table .menu {
        max-width: 15rem;
    }
    .wideimg.main .description {
        left: 6%;
        max-width: 27%;
        font-size: 1.8rem;
        top: 10%;
    }
    .banner2 {
        min-height: 800px;
    }
}
@media screen AND (min-width: 106.25em) {
    body {
        gap: 1.5rem;
    }
    body.table .menu {
        max-width: unset;
    }
    #mainimage3 {
        overflow: hidden;
        height: 800px;
    }
    .wideimg.main .description {
        top: 7%;
        font-size: 2rem;
    }
    .wideimg.main img {
        width: 100vw;
        height: auto;
        margin-top: -10%;
    }

}